YouTube埋め込み動画をjQueryでレスポンシブWebデザインっぽく可変にする方法

最近するぷろでモブログすることも多く動画もその場でYouTubeにアップしてブログエントリに使うことが増えています。

WordPressをお使いの方はご存じのようにYouTubeの動画表示URLを投稿文中に入れるだけでその動画が埋め込まれます。
これはすごく便利ですよね。

しかし、最近はレスポンシブWebデザインテンプレートを使う方も増えて、このYouTube動画を埋め込んだときにサイズが思い通りにならない方も少なくないかもしれません。ボクもちょっと悩んでおりました。

具体的にはこんなことが起きています。

iPhoneで表示したときに埋め込んだ動画がはみ出てたり、テンプレートによっては切れてしまって見えることもあるでしょう。
これは見た目的にもカッコワルイし、サムネイルの全体像が見えないことやバランスもよろしくありません。

ブラウザで表示しているときもウインドウサイズによってはこんなこと発生したりしていて。

原因は動画のiframeのサイズが固定なんだからというところですが、これをどうにしかしてしまう方法もネット上には色々紹介されています。

youtubeをレスポンシブwebデザインに対応させるCSS | Khamsin-note（カムシンノート）

ワードプレス投稿に埋め込んだYouTube動画を簡単なCSSでレスポンシブに対応させる | studioDoghands

youtubeやinstagramの埋め込みコードをレスポンシブ化させてくれるwebサービス「embedresponsively.com」*prasm

いくつかの方法はあるようです。
でも基本的にWordPressならではのYouTube動画URLさえ入れれば動画が埋め込めるという手軽さだけは失いたくないのです。

動画埋め込む度にdivタグを追加するだとか、なんかのサービスを通してコードを生成してコピペするとか、そんな手間をかけることを避けたいのです。
手軽に動画を埋め込める、そのものを大切にして違う方法が無いか、考えてみました。

最近個人的なマイブームとしてjQueryでWordPressから出力されたHTMLを書き換えていくものがあります。
その考えを使ってどうにかしてみようと思いついていましたが、今日やっと実装しました。

埋め込まれた動画のタグの確認

WordPressでYouTube動画URLを投稿すると表示するときに下記のようなタグに変換されています。

[php]<iframe width="500" height="375" src="http://www.youtube.com/embed/4xZ6zVKdJxk?feature=oembed" frameborder="0" allowfullscreen></iframe>[/php]

このiframeタグのサイズ部分「width=”500″ height=”375″ 」をどうにかしたいのです。

jQueryでどうにかする

結果、次のようなコードを書きました。
（要・jQuery、コードは</body>の前にscriptタグ内で書く）

[php]jQuery(‘.col-md-6 p iframe’).attr("width","100%");
var iframewidth = jQuery(‘.col-md-6 p iframe’).width();
var iframeheight = Math.round((iframewidth/4)*3);
jQuery(‘.col-md-6 p iframe’).attr("height",iframeheight);[/php]

やっていることはセレクタ「.col-md-6 p iframe」（ブログテンプレートによって違います）に対して操作します。

まずはwidth=100%として横幅を100%可変な状態にしました。
次にその幅サイズを取得し変数に代入。

4:3の比率と考えて、高さを割ったりかけたりして算出。その高さも変数に代入します。

最後に高さをさきほど計算した値で代入します。

すると現在の幅に応じた幅・高さの埋め込み動画が実現されます。
※画面表示したタイミングで高さの計算をするので、ウインドウサイズを変えた時に幅が可変ですが、高さは固定です。ウインドウをリロードすると高さを再計算して最適な高さで表示します。

結果は？

結果としてこのような形になりました。
左が使用前、右が使用後です。

単純に横幅が合うだけでなく、高さもそれに合わせた高さになっているので、コンテンツに埋める動画の面積も減り、テキストとのバランスも良くなります。
また、ちょうど良いサイズで入っているので埋め込み動画全体のバランスも崩れたときに比べると格段に当たり前の状態になっていて安心できます。

本当はもっと良い方法とかありそうなんですけど、この方式を採用すれば、動画投稿時の手間とかを増やさなくて良いので、しばらくこれでやってみようと思います。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)