動画紹介ブログ等を運営している方はYouTubeの動画を記事に埋め込むことが多いと思いますが、スマートフォン等の小さい画面で見ると、動画が横にはみ出してしまっていませんか？
ユーザーが動画自体にアクセスすれば解決する話なんですが、ブロガー的には離脱率が高くなるのは避けたいので、動画サイズをレスポンシブに変化させて常にwidth:100%で表示するようにカスタムしてみましょう。
試しにこの動画を特に手を加えずに埋め込んでみます。
|
1 |
<iframe width="560" height="315" src="https://www.youtube.com/embed/hMLvaXNBjq4" frameborder="0" allowfullscreen></iframe> |
PCから見ると少し小さく、スマートフォンから見ると画面外に動画がはみ出してしまうという最悪な状態です。
CSSで埋め込み動画のサイズを指定するには、HTML側にも少し手を加える必要があります。
|
1 2 3 |
<div class="vWrap"> <iframe width="560" height="315" src="https://www.youtube.com/embed/hMLvaXNBjq4" frameborder="0" allowfullscreen></iframe> </div> |
このように、埋め込みコードのiframeをdivで包みます。このdivには適当にクラスを付けといてね。
続いてCSSです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.vWrap{ position: relative; margin: 1em auto; padding-top: 56.25%; } .vWrap iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } |
必要なのは上記のコードのみです。そこまで複雑なコードではないですね。
padding-top: 56.25%;ってのが中途半端で気になるところですが、どの解説サイトを見てもこの数値なので諦めてください…
PCでもスマートフォンでも、しっかり横幅100%の表示になっているのが分かると思います。
動画を埋め込む際は是非参考にしてみてください！
