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の動画埋め込みをレスポンシブ対応させる方法をご紹介していきます。
サイトによっては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の動画を埋め込んでいるんだけど、レイアウトが崩れて困っている方はぜひ試してみて下さい。