WordPressテーマなどでレスポンシブ対応のものを使用していたりすると、YouTubeなどiframeを使用した動画表示させたとき、画面が狭い場合はせっかくの動画が以下のように切れてしまうなんてことがあります。
photo by Esther Vargas
こんな感じに。
今回は、Wordpressでそのようなことがないように、iframeをフレキシブルに大きさを変更させる方法です。
目次
WordPressのカスタマイズ
今回は、以下のページに書かれていることなどを参考にしました。
youtube iframeのレスポンシブ対応 – 酒と泪とRubyとRailsと
この記事では、これをWordpress仕様にし、画面の幅が広いデバイスなどで、大きく表示されすぎるのを防ぐ処理を施した方法を紹介します。
functions.phpの編集
まずはfunctions.phpに以下のように追記します。
//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="video-container"><div class="video"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');
これは記事本文表示前に、記事中からiframeタグを見つけて、iframeの外側にラッパーとなるdiv要素を2つ付けています。
これにより、iframe要素が以下のように囲まれて、記事中に表示されます。（※コメントは表示されません）
<!-- iframeが大きすぎに表示されるのを防ぐラッパー -->
<div class="video-container">
<!-- iframeの大きさを調節するラッパー -->
<div class="video">
<!-- iframe -->
<iframe src="url">
</div>
</div>
iframeに2つのdivラッパーが付加されています。
スタイルシートの編集
あとはスタイルシートの編集です。
/************************************
** video
************************************/
/*動画の最大幅を指定する*/
.video-container{
max-width:640px;
}
/*動画の大きさを調整*/
.video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
/*動画を囲んでいるdiv目一杯に広げる*/
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
表示の確認
以上のようにして表示を確認すると、以下のようにちゃんと画面の幅に合わせて表示されるようになりました。
たとえデバイスの横幅が大きくなりすぎても、スタイルシートで設定した640px以上になることはありません。（最大幅は自由に変更してください）
まとめ
これで、レスポンシブサイトでもYouTubeなどを綺麗に表示できるようになりました。
functions.phpと、style.css（もしくは他のCSS）に2回コピペするだけなので、手軽に実装出来るのではないかと思います。
はじめまして
こちらの記事を参考に、最近始めたWPの動画レスポンシブ対応に成功しました。貴重な情報をありがとうございます。
１点お伺いしたいことがあります、
作成中のサイトで下記コードの動画がスマホでのレスポンシブに対応しません（サイズが変わらない）。これは、iframeタグがコード内に無いので反映されないということでしょうか？他のサイトでは反映できているようなのですが…。ご教授いただければ幸いです。
Webでのサイト構築そのものが勉強中のため、説明に不十分な所があるかもしれません、ご容赦ください。
以下は問題のコードになります。
※タグ内“0000-000（動画番号）”“000000（ID）”となっています。
どうぞ宜しくお願いいたします。