このブログを始めてから、1ヶ月になりました。更新は亀更新、ランチパックの比重が高いですが・・・　

テーマが、オリジナルではないので何かと不便な所もでてきます。
その一つが、埋め込んだYouTube動画が、レスポンシブ対応してなく可変しない・・・という不便？不満？が出てきたので調べてみました。

追記）この記事は、レスポンシブデザインのサイトを作った後に、YouTubeがどうしてもレスポンシブしない人に便利な記事です。

何も設定していないと、YouTubeの埋め込み動画は可変せず、ブラウザウインドウ下部にスクロールバーすら出なく、ブラウザウインドウにめり込んだ状態になります。
スマホなどで閲覧したときもこの状態になると思います。
「・・・と思います」というのは、私自身がスマートデバイスを持ってないので、確信が持てません。ごめんなさい ;(

本題です。
基本のCSSコーディングはこれ！！

.youtube {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

そして、埋め込んだYouTube動画をdivタグで囲みます。

<div class="youtube">YouTubeの埋め込みコード</div>

【WordPress】レスポンシブテーマでCSSコードの追加だけでYouTube動画をはみ出さずに表示させる方法 | HaLPosT

簡単な応用としては・・・

.youtube {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 600px; /*最大幅600pxを超えるなよぉ～ってやつ*/
}

max-widthを使ってみました。
基本コードだけだと、もしかしたらブラウザウインドウの拡大縮小時に設定したブログの枠をはみ出してしまうかもしれません。
まぁ～、それが気持ち悪いと思ったので、少し手を加えてみました。

他には、jQueryで対応する方法もあるようです。
[Å] YouTubeやVimeoなど固定サイズになった外部の動画をレスポンシブに対応させる方法 | あかめ女子のWebメモ

結局のところ・・・

・埋め込んだYouTube動画のコードをdivタグで囲まなければいけないこと
・jQueryよりcssのほうが軽いと思ったこと

ということで、cssの方を紹介してみました。

あっ、YouTubeの埋め込み動画の貼り付けなどは、著作権などに注意して、清く正しく美しく使用しましょう　XD