유투브 영상을 웹페이지에 넣으려고 할 때 필요한 css를 알아보자

HTML

<div class='container'>
  <div class='item'></div>  
</div>

• 웹페이지에 영상을 넣을 위치를 잡아 줄 container
• 영상이 들어갈 부분인 자식요소 item을 만들어준다

CSS

.container{
  3.영상의 중앙 보여주기
  먼저 부모요소에 높이를 지정해준다
  position: relative;
  overflow:hidden;
  height: 200px;
  background-color:pink;
}

.container .item{
   1.먼저 영상의 넓이 부분을 지정해준다
   (이때 높이의 값은 지정해주지 않는데 이는 비율을 통해 자동으로 만들어주기 위해서다)
  width:700px;
  background-color:royalblue;
  
4. 왼쪽으로 50% 이동 후 다시 margin-left를 이용해 넓이/-2를 해주어 가로 중앙으로 맞추어 준다

위아래 중앙 역시 똑같은 방법으로 맞추어 주면 되는데 높이의 경우 지정한 높이 값이 아니므로 calc를 이용해 입력해준다
  position: absolute;
  left:50%;
  margin-left: calc(700px/-2);
  top: 50%;
  margin-top: calc(700px*9/16/-2);
}



.container .item::before{
2.가상요소를 통해 영상의 높이 값을 자동적으로 지정해준다
부모요소의 넓이 만큼 사용하기 위해 width:100%를 입력하고
padding-top에 19:6 즉 56.25%, 퍼센트의 값을 입력하면 
자동적으로 부모요소의 넓이의 56.25% 만큼의 높이가 생기게 된다.
  content:'';
2-1. 가상요소는 인라인 요소로 display:block을 추가로 입력해주어야 한다.
  display:block;
  width:100%;
  height:0;
  padding-top:56.25%;
}