[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기

<div class="video">
  <div class="video-ratio">
   <iframe src="https://www.youtube.com/embed/afvT1c1ii0c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

.video{
  max-width: 650px;
  border: 4px solid red;
}
.video-ratio{
  height: 0;
/*  padding top은 부모 요소의 가로 요소에 영향을 받는다  */
/*  height는 반응형이 안되고 크기를 픽스해버리는 것임  */
  padding-top: 56.25%;
  position: relative;
}
iframe{
  background: black;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

padding-top 에 56.25퍼센트는 

16:9를 계산해서 나온 수치임

그것이 padding이기 때문에 그 안에 요소가 들어갈 수 없다.

그러므로 iframe에 position : absolute를 주었다.

그러면 부모 요소에 position: relative가 있어야함