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

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

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

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

目次

HTMLソース記述

WordPressの場合、ブログ投稿画面にYouTubeの埋め込みたい動画URL(例.https://www.youtube.com/watch?v=-r5tLHTXhLg)をコピー&ペーストすると、下記のようなコードが自動生成されますが、HTMLソースはいじるとこなしで、このままでOKです。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の動画の幅と高さの比率が16:9なので、ブラウザ幅に応じてその比率を維持するには横幅100%とした場合に、高さを何%にするかというところがポイントです。高さは100%×9÷16=56.25%になります。

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

↓こんな感じで。

実際ブラウザの横幅を動かしてみると、ブラウザの横幅にあわせて、YouTube動画が縦横比を維持したまま伸縮するのが確認できると思います。

ちなみにこの動画は最近お気に入りのアーティスト、Shiggy Jr. のサマータイムラブのPVでした(^_^.)

この記事が気に入ったら
いいね または フォローしてね!

yossy(ヨッシー)の画像
yossy(ヨッシー)
岐阜県なんちゃってブロガー
岐阜県美濃加茂市在住の田舎人。
趣味はギター・カフェ・グルメ巡り。
2015年2月から自分への備忘録・雑記としてこのブログを始めました。
普段の日常生活で経験した事・感じたこと・少しは他の誰かに役立つかもしれない情報などをゆる~く書いてます。
目次
閉じる