youtube等をiframeで入れ込んだ時にレスポンシブ対応にする方法
参考:http://mae.chab.in/archives/2527
youtubeでなくてもいいけど、基本iframeタグは幅と高さを指定する。
<iframe width="500" height="300" ...></iframe
ただしこのままだと、500px×300pxがスマホでも確保されるため、横スクロールが発生することになる。
その対応。
HTML
<div class="wrap_youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/HIOooL-vXeQ" frameborder="0" allowfullscreen></iframe> </div>
@media screen and (max-width: 560px) { .wrap_youtube { position: relative; width: 100%; padding: calc(315 / 560 * 100%) 0px 0px 0px; } .wrap_youtube iframe { position: absolute; top: 0px; left: 0px; width: 100%!important; height: 100%!important; } }
paddingの算出にcalcを使うので、CSS3限定になるけれど、まぁ対応ブラウザは最新だけでいいや、という人ならこれで問題ないかと。