WordPress YouTube動画をレスポンシブ対応に

YouTube動画

レスポンシブデザインでイメージは

img{
	max-width: 100%;
	height: auto;
}

といった感じにすれば横幅に合わせてイメージの大きさが変わってくれます。

これをYouTubeの動画でもやりたい。

<iframe width="600" height="338" src="//www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>

というiframeを埋め込むと、PCだと上のように表示されます。
こりゃまあ普通ですよね。

ちっちゃい画面でも横幅がぴたりと収まるように

YouTubeレスポンシブ対応

しかしこれをスマホで見ると、左のように画像が切れてしまうのです。
これはかっこわるい。

そこでCSSに下記を加えます。

.YoutubeWrapper{
	position: relative ;
	margin-top: 1.2em ;
	margin-bottom: 1.2em ;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
}

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

そして、記事中のYouTubeのiframeを

<div class="YoutubeWrapper"></div>

で囲ってあげましょう。

これで見事に右のようにレスポンシブになりましたo(^0^)o