Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2017/01/31 2018/01/13 Web制作

YouTubeの埋め込み動画サイズをレスポンシブに変化させる方法

動画紹介ブログ等を運営している方はYouTubeの動画を記事に埋め込むことが多いと思いますが、スマートフォン等の小さい画面で見ると、動画が横にはみ出してしまっていませんか?

ユーザーが動画自体にアクセスすれば解決する話なんですが、ブロガー的には離脱率が高くなるのは避けたいので、動画サイズをレスポンシブに変化させて常にwidth:100%で表示するようにカスタムしてみましょう。

試しにこの動画を特に手を加えずに埋め込んでみます。

PCから見ると少し小さく、スマートフォンから見ると画面外に動画がはみ出してしまうという最悪な状態です。

レスポンシブ対応

CSSで埋め込み動画のサイズを指定するには、HTML側にも少し手を加える必要があります。

このように、埋め込みコードのiframedivで包みます。このdivには適当にクラスを付けといてね。

続いてCSSです。

必要なのは上記のコードのみです。そこまで複雑なコードではないですね。
padding-top: 56.25%;ってのが中途半端で気になるところですが、どの解説サイトを見てもこの数値なので諦めてください…

表示結果

PCでもスマートフォンでも、しっかり横幅100%の表示になっているのが分かると思います。
動画を埋め込む際は是非参考にしてみてください!