YouTubeをレスポンシブ対応にさせる

YouTubeの埋め込みをレスポンシブに対応させる方法をメモ。

サンプルコード

HTML

<div class="yt-wrap">
<div class="yt-inner">
<iframe src="//www.youtube.com/embed/aIRAOr8WbXY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

CSS

.yt-wrap {
	max-width: 640px;
}
.yt-wrap .yt-inner {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.yt-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.yt-innerに指定しているpadding-top: 56.25% は、今回のYouTubeのサイズが640px×360pxなので、
横幅100%の場合の縦幅は 100% / 640px * 360px = 56.25% となり、これを指定しています。

YouTubeレスポンシブ対応のデモページ
　

今回はYouTubeで行っていますが、この方法はiframeの比率を維持したままレスポンシブに対応させるものなので、YouTubeに限らず使用できます。

ちなみにVineの場合、画面幅を狭めた時は可変になるのですが、
広げた時はframe内の動画サイズが大きくならないため、微妙に対応できません。

Vineレスポンシブ対応のデモページ