Youtubeの埋め込み動画をレスポンシブに対応させる方法

2015/02/13
1

Youtubeの埋め込み方法(iframe)

Youtubeの埋め込みしたい動画ページで動画の下にある共有をクリックします。

埋め込みコードをクリックしてiframeタグをコピーし、ブログにペーストして完了です。

html
<iframe width="853" height="480" src="https://www.youtube.com/embed/DVwHCGAr_OE" frameborder="0" allowfullscreen></iframe>
2

Youtubeをレスポンシブ対応にさせる方法

先程コピペした埋め込みタグ(iframe)をdivで囲みます。囲んだdivにCSSを設定しますのでdivのclassをmovie-wrapとします。

html
<div class="movie-wrap">
<iframe width="853" height="480" src="https://www.youtube.com/embed/DVwHCGAr_OE" frameborder="0" allowfullscreen></iframe>
</div>

movie-wrapmovie-wrap内のiframeに下記のようにCSSを設定します。

CSS
.movie-wrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

これでwindow幅を変更してもレイアウトが崩れることなくYoutubeのサイズが変更されるようになります。

Advertisement