通常、YoutubeをiFrameで埋め込むと、大きさが固定されてしまいますが、埋め込んだYoutube部分を、横幅いっぱいに（100%に）広げる方法をご紹介します。

ブログなどで、最大で表示したいときに必須ですね。

まずは、例から

HTML

<div class="youtube-wrapper">
  <iframe> ... </iframe>
</div>

CSS（スタイルシート）

<style>
.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
}
</style>

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

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

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

このようなことは仕様書で定義されていますが、読みたい人はあまりいないと思います。
https://www.w3.org/TR/CSS21/visudet.html

また正確には、この横幅にあわせて伸び縮みする状態は「レスポンシブ(Responsive)」でなく「イラスティック(Elastic)」などと呼ばれますが、まあ、細かいのでこれの説明も割愛します。気になる人はぐぐってみてくださいね。