아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법

<img>의 경우 width 속성을 설정해주면 이미지 비율에 따라서 height가 자동으로 설정된다.

때문에 width를 100%로 하면 부모 엘리먼트의 width에 따라 비율을 유지하면서 이미지 크기를 조절할 수 있게 된다.

그러나 <iframe>은 그렇지 않다.

유튜브 영상을 불러올 때에는 <iframe>을 사용하고 유튜브 영상의 크기를 반응형으로 조절하려면 다른 방법이 필요하다.

 

<div id="area">
  <iframe id="video" src="https://www.youtube.com/embed/ZbZSe6N_BXs" />
</div>

 

위처럼 #area로 <iframe>을 감싸서 #area의 크기에 iframe 크기를 맞추는 방법이 있다.

먼저 iframe의 width와 height를 100%로 한다.

#area의 padding-bottom에 % 값을 줘서 #area의 가로세로 비율을 조절한다.

유튜브 영상의 비율인 16:9로 하려면 padding-bottom에 56.25%를 넣는다.

 

#area {
  position: relative; /* absolute는 부모가 relative일 때 부모를 따라간다. */
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 */
}

#video {
  position: absolute;
  width: 100%; /* 부모에 맞게 꽉 채운다. */
  height: 100%;
}

 

이제 #area의 부모 width 크기에 따라 비율이 유지되면서 #area의 크기가 달라지고 iframe인 유튜브 영상의 비율이 깨지지 않는다.