[備忘録]wordpressで記事内に貼り付けたyoutube動画の横幅をレスポンシブ対応させるためのあれこれ。

今日の記事はwordpressの新テーマ作りのために調べたことの備忘録。
今回は記事内に貼り付けたyoutube動画の横幅がテーマです。

今作っている新テーマはレスポンシブ対応。
現在使っているテーマもレスポンシブなんですが、いろんな画面サイズに対応させるのはなかなか難しいところもありまして。
すごーく気になっていることを残しながらも公開し、修正せずに使っているのが実情で…。

その中でも特に気になっていることの一つがYoutube動画の横幅！！
PC版は特に気にならないんですが、スマホ版のデザインでは、「Youtube動画」がガッツリと画面からはみ出しちゃっているわけです。

これを何とかしようというのが今回の目的です。

前提として、youtubeの動画はwordpressのoEmbed（メディア埋め込み機能）を使います。
本文内にyoutubeのURLを貼り付ければ自動的に動画が貼り付けられるというアレです。

oEmbed – WordPress Codex 日本語版

メディア埋め込み機能 …
oEmbededについて

横幅の調整はCSSで！

CSSの指定はこちらを参考にしました。

WordPressで記事内に貼り付けたビデオの幅の調節に苦しんでいるなら取り入れるべきCSS技*prasm

まずは、動画を以下のdivで囲み、

[html]
<div class="video-container">
</div>
[/html]

そのdivに対し以下のCSSを当てます。

[css]
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/css]

これでPCだろうがスマホだろうが親要素の横幅いっぱいに収まります。
heightの指定を忘れるとエライことになりますのでお気をつけて！

ただ、これまでに公開した全記事のyoutube動画を新たにdivで囲むのはめんどくさい！！

というわけで、、、

埋め込み動画をdivで囲むために、oEmbededフィルターフック！

上記の記事ではAddQuicktagをオススメされていますが、すでにアップした動画には無効！
なのでここはさくっとoEmbededフィルターに自前の関数をフックして、divを加えてしまいましょう。

というわけでレッツ力業！
function.phpに以下の記述をします。
具体的には、youtube_responsiveという関数を作成し、embed_oembed_htmlというフィルターにフックしています。

[php htmlscript=”true”]
function youtube_responsive( $html, $url, $attr, $post_ID ) {
if ( preg_match( ‘/^http:\/\/www\.youtube\.com/’, $url ) ) {
$html = ‘<div class="video-container">’ . $html . ‘</div>’;
}
return $html;
}
add_filter( ‘embed_oembed_html’, ‘youtube_responsive’, 10, 4 );
[/php]

問題はyoutube以外の動画を貼り付けたい場合にはそれもまた個別に記述しないといけないところ。
でもまあ、当面はyoutube以外は使う予定はないのでこれで良しとします。

というわけで、上記の修正を加えたページにスマホでアクセスしてみると、、、