YouTubeやVimeoなどの埋め込み動画をレスポンシブ対応させる方法

Posted on March 29th, 2014
In:Tips
No Comments

割と使用頻度が高いのに毎回のように「どうするんだっけ…」となってしまうので備忘録。YouTubeやVimeoなどのような埋め込み動画をレスポンシブ対応させる方法で、特に面倒な記述も必要なく実装できます。

YouTubeやVimeoのような埋め込み動画のレスポンシブ対応は、HTMLとCSSを以下のように記述することで実装できます。
HTMLは動画を表示させるiframeをdiv要素で囲み、CSSはdivとiframeそれぞれにスタイルを指定します。

HTML

<!-- YouTube -->
<div class="video">
	<iframe src="//www.youtube.com/embed/xxx?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<!-- Vimeo -->
<div class="video">
	<iframe src="//player.vimeo.com/video/xxx" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

※ソース赤字部分は動画コードやパラメータ指定部分

CSS

.video {
	position: relative;
	height: 0;
	padding: 30px 0 56.25%;
	overflow: hidden;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

今回はYouTube・Vimeoともにiframeを使用しているのでCSSもiframeのみを記述していますが、objectやembedの場合でも同じように記述すればレスポンシブ対応させることができます。

以下は実際にYouTubeとVimeoをレスポンシブ対応して表示させているものになります。