【コピペでOK】Youtubeの動画埋め込みをレスポンシブ対応させる方法!

【コピペでOK】Youtubeの動画埋め込みをレスポンシブ対応させる方法!

Youtubeの動画埋め込みをレスポンシブ対応させる方法をご紹介していきます。この記事にあるhtmlコードをコピペして、Youtubeの動画のIDを差し替えるだけでレスポンシブなYoutubeの埋め込み動画を実現することが出来ます。


目次[非表示]

  1. Youtubeの動画埋め込みをレスポンシブ対応させたい
  2. Youtubeの動画埋め込みをレスポンシブ対応させる方法
  3. まとめ

Youtubeの動画埋め込みをレスポンシブ対応させたい

Youtubeでは動画を他のサイトに埋め込みを実現する機能があります。

埋め込みをする際にiframeのタグが発行されますので、それをそのままサイトのhtmlの中に埋め込めば動画の埋め込みが実現できます。

Youtubeの動画埋め込みの例として次のようになります。埋め込みのhtmlタグ(iframeタグ)とその結果となります。
<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/Hd9J8ysES9E" 
  frameborder="0" 
  allow="autoplay; 
  encrypted-media" 
  allowfullscreen>
</iframe>
しかし埋め込み動画の横幅や高さはiframeタグのwidthやheightを変えることで対応できますが、縦横の比率が崩れたりブラウザのウィンドウサイズが変わった場合に対応していません(つまりレスポンシブ対応していない)。

サイトによってはPCサイト・スマホサイトやウィンドウサイズをかえたときでも、縦横比・レイアウトなど崩れることなく表示させたいニーズがあるかと思います。

そこで今回はYoutubeの動画埋め込みをレスポンシブ対応させる方法をご紹介していきます。

Youtubeの動画埋め込みをレスポンシブ対応させる方法

ではYoutubeの動画埋め込みをレスポンシブ対応させる方法をご紹介していきます。

Youtubeは16:9の縦横比で動画を表示しますが、htmlとcssを変更することでレスポンシブにできます。以下のコードをコピペして、[Youtubeの動画ID]の箇所に埋め込みたいYoutubeの動画のIDを入れて試してみましょう。

<div style="position: relative; padding-bottom: 56.25%;">
  <iframe 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
    src="https://www.youtube.com/embed/[Youtubeの動画ID]" 
    frameborder="0" 
    allow="autoplay; 
    encrypted-media" 
    allowfullscreen>
  </iframe>
</div>

上記のhtmlの中にYoutubeの動画の埋め込みコードを書くと、縦横比を保ったままレスポンシブにできます。

どうでしょうか。こちらの動画はブラウザのウィンドウサイズを小さくしてみて下さい。レスポンシブに(縦横比を保ったまま)同じく動画もサイズが縮小されていくかと思います。

Youtubeの動画埋め込みをレスポンシブ対応させる方法

  • 上記のhtmlをコピーして[Youtubeの動画のID]の箇所を埋め込みたいYoutube動画のIDにしよう

まとめ

いかがでしたでしょうか。htmlを少しかえるだけで、Youtubeの動画の埋め込みはレスポンシブに対応させることができます。

ぜひこの記事のhtmlをコピペしてYoutubeの埋め込み動画のレスポンシブを実現してみて下さい。
(その他のYoutubeの埋め込みオプションについては適宜設定下さい)

特にPCサイト/スマホサイトにYoutubeの動画を埋め込んでいるんだけど、レイアウトが崩れて困っている方はぜひ試してみて下さい。


関連記事