youtubeの動画をCSSで固定比レイアウトにする

youtubeの動画をレスポンシブで表示させたいときに使えるCSSです。
埋め込むiframeとそれを囲う要素の2つにスタイルを指定します。

##埋め込みコード
以下のように、埋め込みコードは発行した際、縦と横の長さの数値を指定することになります。

<iframe width="640" height="360" src="https://www.youtube.com/embed/埋め込む動画のパス" frameborder="0" allowfullscreen></iframe>

このままだと、レスポンシブにならないのでdivなどでiframeを囲ってスタイルを指定します。

##幅と高さが一緒に変わるHTML要素をつくる
img要素の挙動のように、幅と高さが一緒に変わるようなHTML要素をつくります。

HTML

<div class="video">
    <iframe width="640" height="360" src="https://www.youtube.com/embed/埋め込む動画のパス" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.video{
width:100%;              /*横幅いっぱいにwidthを指定*/
padding-bottom: 56.25%;  /*高さをpaddingで指定(16:9)*/
height:0px;              /*高さはpaddingで指定するためheightは0に*/
position: relative;
}

包含ブロックに対して横幅いっぱいに表示するためにwidthは100％にします。(左右マージンやボーダーを使いたい場合は包含ブロックに指定)
heightを%指定しても、包含ブロックの高さに左右されてしまいます。
padding-topやpadding-bottomの%指定は包含ブロックの幅が基準になるのでpaddingで高さを確保します。
youtubeの動画は16:9の画角なので縦幅は56．25%となります。
これで横幅が変わっても常に16:9の比率を保持する要素ができました。

##iframeのサイズを制御する
続いてiframeにスタイルを指定します。

CSS

.video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

絶対指定をします。
widthとheightの指定によってiframeに記述されていてたwidth属性とheight属性のピクセル値によらず枠ぴったり収まるようになります。

##結論

iframeを要素で囲って以下のスタイルを追加すればOK

CSS

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