유튜브 영상을 홈페이지에 넣으면 일반적으로 사이즈를 지정하게 됩니다.
<div class="movie"> <iframe src=""></iframe> </div> <style> .movie {} .movie iframe {width:100%; height:300px;} </style>
반응형웹을 만들면서 모바일 사이즈일 경우 미디어쿼리를 이용해 사이즈를 강제 조정합니다.
<div class="movie"> <iframe src=""></iframe> </div> <style> .movie {} .movie iframe {width:100%; height:300px;} @media all and (max-width:640px) { .movie iframe {height:200px;} } </style>
하지만, 강제 조정하지 않고 비율에 맞춰 자동 조정이 되게 하는 방법이 있습니다!
<div class="movie"> <iframe src=""></iframe> </div> <style> .movie {position:relative; padding-bottom:56.25%; height:0; overflow:hidden;} /* padding-bottom: 56.25% = 16:9 비율 75% = 4:3 비율 66% = 3:2 비율 62.5% = 8:5 비율 */ .movie iframe, .movie object, .movie embed {position:absolute; top:0; left:0; width:100%; height:100%;} </style>
유튜브 뿐 아니라 iframe 관련 부분을 div, img 등에 적용하는 것도 가능합니다.