YouTube動画などを埋め込んだiframeをレスポンシブ対応させる場合、だいたい検索すると単純に iframe に width:100% するのと、横幅いっぱいの16:9のwrapperを作って、その中に iframe をposition: absolute;width: 100%;height: 100%;っていうのが出てくる。
参考
http://princesswell.rocketserver.jp/css/youtube-iframe-responsive/
http://harukin.com/2013/06/06/responsive-video/
単純に width:100% だけだと高さが反映されないことがあって、ページが狭くなると細長くなっちゃうので使えない。もう１つの wrapper を作る方は、動作は問題ないけど、過去記事の iframe にいちいち div を入れなければならなくて大変。でもそこは、jQueryを使ば問題無い。
/* 埋め込みiframeにwrap */
jQuery(document).ready(function(){
jQuery(".entry-content>p>iframe").wrap("<div class='iframe-wrap'></div>");
});
参考
http://www.dream-seed.com/weblog/archives/2013/05/26985/
ただし、これをこのままstyle.cssに記述してしまうと、サイズ指定して埋め込んだ動画も全部横幅いっぱいになってしまうので、メディアクエリをつけて記述する。
@media(max-width: 640px) {
/* iframe埋め込み */
.iframe-wrap {
position: relative;
padding-top: 56.25%;
width: 100%;
}
.iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
調べていた時に、これを書いているブログが無かったので書きました。
P.S.
実はこの方法には問題があって、 iframe 全部に <div> を付けてしまうのでGoole mapの地図なんかも 16 : 9 に切り抜かれてしまいます。
それを回避するためには、例えばjQueryの所で
/* 埋め込みiframeにwrap */
jQuery(document).ready(function(){
jQuery(".entry-content>p>iframe[src*='youtube']").wrap("<div class='iframe-wrap'></div>");
});
とかやってyoutubeの埋め込みだけに <div> を付ければ良いんだけど、そうすると地図やその他の iframe がレスポンシブ対応しなくなります。
16 : 9 に切り抜かれてしまったとしても、レスポンシブ対応しないよりましかなと思うので、僕はこの方法を使っています。