割と使用頻度が高いのに毎回のように「どうするんだっけ...」となってしまうので備忘録。
YouTubeやVimeoなどのような埋め込み動画をレスポンシブ対応させる方法で、特に面倒な記述も必要なく実装できます。
実装にはHTMLとCSSを下記のように記述し、HTMLは動画を表示させるiframe
をdiv
要素で囲み、CSSはdiv
とiframe
それぞれにスタイルを指定します。
<!-- YouTube -->
<div class="video">
<iframe src="//www.youtube.com/embed/{動画コード・パラメータ指定部分}" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Vimeo -->
<div class="video">
<iframe src="//player.vimeo.com/video/{動画コード・パラメータ指定部分}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
.video {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
CSSで.video
に対して指定しているpadding: 30px 0 56.25%;
は場合によっては不要な余白等が出ることもあるので、その場合は代わりにpadding-top: 56.25%;
を使用してみてください。
また、今回はYouTube・Vimeoともにiframe
を使用しているのでCSSもiframe
のみを記述していますが、object
やembed
の場合でも同じように指定すればレスポンシブ対応させることができます。