岐阜県なんちゃってブロガーyossyの書き綴るブログ。[公開記事480件/2016年11月27万PV]

カテゴリー

固定ページ

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

yossy'sイチオシ記事セレクション

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&amp;rel=1&amp;fs=1&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;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(よっしー)
岐阜県美濃加茂市在住。1979年2月生まれ。♂。
趣味はギター・読書・グルメ散策など。
2015年2月から自分への備忘録・雑記としてブログを始めました。
身の回りの出来事・思った事・少しは他の誰かに役立つかもしれない情報などをフリーテーマで書き綴っています。
クレオフーガで気まぐれに自作した音楽をアップしてたりします。

ヨッシーのつぶやき

姪っ子のクリスマスプレゼントをAmazonでポチる午後の昼下がり。
>>メルちゃん おせわパーツ

人気の記事

月別アーカイブ

ページトップへ