［み］埋め込み動画もレスポンシブに！ブラウザのサイズに合わせて動画のサイズもリサイズする方法

2015年7月3日2018年2月5日

YouTubeとかVimeoとかの動画をレスポンシブなWebサイトに埋め込んだ場合、せっかくなのでこの埋め込み動画もレスポンシブにリサイズしてほしいですよね。それを実装する方法を紹介します。

ブラウザのサイズに合わせて埋め込み動画もリサイズする方法

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

html

HTML

<div class="video">
	<iframe width="960" height="540" src="https://www.youtube.com/embed/wPYCDn8EvUE" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	text-align: center;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}