YouTube などの動画を iframe で埋め込こんだ時に CSS でレスポンシブにする方法

このブログはレスポンシブデザインのテンプレートを使っているのですが。YouTube の動画を埋め込んだ時に、横幅の狭いスマートフォンで表示した時、縦と横の比率がおかしくなっているのが前から気になっていたので、埋め込み動画もレスポンシブに対応してみました。

なんと。CSS で調整するだけで、埋め込み動画もレスポンシブに対応することができました。

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

こちらを参考にさせて頂きました。

CSS: Elastic Videos

でこちらが元ネタ（？）なのかな。

元ネタの方からソースを頂きました。

レスポンシブにする HTML と CSS

CSS

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 20px; /*追加*/
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

margin-bottom: 20px; /*追加*/

}

.video-container iframe,

.video-container object,

.video-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

「margin-bottom」は自分で追加しました。下に続く項目がピッタリと動画にくっついてしまったので。

HTML

<div class="video-container">
	<iframe width="560" height="315" src="//www.youtube.com/embed/SXEc9WZ1bkY" frameborder="0" allowfullscreen></iframe>
</div>

</div>

これで埋め込み動画を美しく表示できました。

Johnny Marr – New Town Velocity

動画の最大幅をを指定する

また、動画の最大幅を指定したいときは、以下を追加すればよいそうです。

CSS

.video-wrapper {
	width: 600px;
	max-width: 100%;
}

.video-wrapper {

width: 600px;

max-width: 100%;

}

HTML

<div class="video-wrapper">
	<div class="video-container">
		<iframe width="560" height="315" src="//www.youtube.com/embed/SXEc9WZ1bkY" frameborder="0" allowfullscreen></iframe>
	</div>
	<!-- /video -->
</div>
<!-- /video-wrapper -->