Youtubeの埋め込み動画を使ったサイトの構築はよくありますが、画面幅に応じて拡大縮小させる、いわゆるレスポンシブ対応するにはちょっと工夫が入ります。今回はそのやり方を紹介。
max-widthだと上下に余白が出る
動画をレスポンシブ対応させようとしてよくやりがちなのが、画像と同じようにmax-width: 100%;とするやり方。
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/S5st_BGFpLI?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
.video {
width: 100%;
}
.video iframe {
max-width: 100%;
}
See the Pen Youtube埋め込み動画レスポンシブ デモ1 by diwao (@diwao) on CodePen.
これでも埋め込み動画を縮小させることは可能なのですが、画面サイズが大きくなった時に動画が大きくなっていかないですし、狭めた時にも上下に黒い余白ができてしまったりしてキレイに表示させることができません。
iframeのpositonをabsoluteに
先ほどの問題を解決する方法はちょっと複雑で、iframeの親要素を横幅に対して可変させるように作り、かつiframeをその中めいいっぱい広がるようにしてレスポンシブ対応を実現させます。完成形のコードはこちら↓
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/S5st_BGFpLI?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
.video {
padding-top: 56.25%;
position: relative;
width: 100%;
}
.video iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
ひとつづつ見ていきましょう。まずiframeの親要素である.videoから。width: 100%;とし、画面の横幅に応じてwidthが可変するようにします。そしてpadding-top: 52.65%;がポイントになるのですが、これは埋め込み動画の高さを確保するための指定です。
上下のpaddingを%で指定した時、その値は親要素のwidthを基準に計算される、という特徴があります（詳しくはこちら → 上下のpaddingとmarginの%指定は親要素の横幅を基準に計算される - diwao日記）。
これを応用すると、画面幅に応じて高さも可変する要素を作ることができまして、今回はそれを使います。 Youtube埋め込み動画の縦横比は16:9なので、横幅を100%とした時の高さは9/16 * 100 = 56.25%となります。なのでpadding-top:56.25%;で動画の高さが確保できるというわけです。
このままだとpadding-topの分、子要素であるiframeが下に押し出されてしまうので、.videoにpostiion: relative;、iframeにpositon: absolute;とtop: 0;、left: 0;を指定してiframeの位置を.videoの左上に重ねてあげます。
あとはiframeにwidth: 100%;、height: 100%;とすれば、iframeが.videoをぴったりと覆う形となり、期待通りレスポンシブな動きをしてくれるようになるというわけです。
See the Pen Youtube埋め込み動画レスポンシブ デモ2 by diwao (@diwao) on CodePen.
分かりやすく説明できている自信はないですが、仕組みを分かってしまえば難しいことではないので、ぜひサイト制作に取り入れてみてください。
