위처럼 #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인 유튜브 영상의 비율이 깨지지 않는다.
추천 : 