通常、WEBページ内に、YoutubeのiFrame（アイフレーム）で埋め込むと、横幅、縦の長さが固定されてしまいます。

この記事では、埋め込んだYoutube iFrame部分を、画面の横幅いっぱいに（100%に）広げる方法をご紹介します。

Youtube埋込iFrameで、横幅を広げてレスポンシブにする方法

ブログなどにYoutubeのiFrameを埋め込んで、横幅を最大で表示したいときに必須な調整となります。

まずは、実装例から、HTMLでは、iFrameを特定のDIVで囲んでやる必要があります。

HTML とクラス設定

<div class="youtube-wrapper">
<iframe src="https://www.youtube.com/embed/ChOhcHD8fBA" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

CSS（スタイルシート）

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

解説すると、
クラス .youtube-wrapper で指定した、{height:0}, {padding-botttom:56.25%}がポイントで、「height:100%」は親要素のheightに対して100%、一方のpadding-bottomは、親要素の（＃）width値に対して、100%の値を取ります。（これはCSSの仕様です。）

ですので、横幅を１としたとき縦幅が、0.5625になってくれる。すなわち16:9のアスペクト日が実現できるというわけです。このようなアクペクト比の固定方法は、昨今のWEBコーダーにとっては、必須の知識となっています。

（＃）正確には「親要素の」ではないんですが、そう思っていただいたほうが話が早いので割愛します。

このようなことは仕様書で定義されています。ちょっと小難しくなりますが、こちら：
https://www.w3.org/TR/CSS21/visudet.html