YouTube動画をレスポンシブ対応にする方法

URLをコピーしました！

YouTube動画をレスポンシブ対応にする方法についてご紹介を。

YouTubeの動画の埋め込みコードをそのままコピー＆ペーストでブログの記事やWEBサイトのページに張り付けると、動画埋め込みHTMLソースコードの<iframe>タグで横幅がピクセル固定になっているので、ブラウザの横幅に応じて横幅と高さが自動調整されないわけです。

というわけで、YouTube動画の埋め込みコードをレスポンシブ対応にするにはCSSコードを少しだけ追記してあげれば簡単に対応できます。

HTMLソース記述

WordPressの場合、ブログ投稿画面にYouTubeの埋め込みたい動画URL(例．https://www.youtube.com/watch?v=-r5tLHTXhLg)をコピー＆ペーストすると、下記のようなコードが自動生成されますが、HTMLソースはいじるとこなしで、このままでＯＫです。CSSの記述だけ追加します。

<span class="embed-youtube" style="text-align:center; display: block;">
<iframe class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/-r5tLHTXhLg?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent" frameborder="0" allowfullscreen="true">
</iframe>
</span>

正式なYouTube動画の埋め込みコードを使う場合、YouTube動画ページの「共有→埋め込みコード」からコピー＆ペーストしますが、その場合、上記の<iframe>タグの親要素<span>が無い状態になってしまいます。
今回紹介するやり方は、<iframe>の親要素がないと上手くいかないので、<iframe>に親要素を追加します。
以下のCSS記述をそのまま使いたい場合は、<span class=”embed-youtube”>~</span>で<iframe>を囲います。

CSS記述

あとはCSS側に下記のような記述を追加します。

/* for youTube responsive */
span.embed-youtube{
position: relative;
width: 100%;
padding:56.25% 0 0 0 ; /* 100×9/16 */
}

span.embed-youtube > iframe.youtube-player{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}

レスポンシブ対応にするには基本的に幅と高さをピクセルではなくて、％指定にする必要があります。
YouTubeの動画の幅と高さの比率が１６：９なので、ブラウザ幅に応じてその比率を維持するには横幅100%とした場合に、高さを何％にするかというところがポイントです。高さは100%×９÷16＝56.25％になります。

少しだけトリッキーかもですけど、上記の簡単な記述をするだけでWordPressの余計なプラグインを使う必要もなく簡単にレスポンシブ対応にできます。

↓こんな感じで。