반응형웹에서 유튜브 영상 높이도 자동으로 비율에 맞춰 바뀌게 할 수 있습니다

유튜브 영상을 홈페이지에 넣으면 일반적으로 사이즈를 지정하게 됩니다.

<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 등에 적용하는 것도 가능합니다.