Edited at

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

More than 3 years have passed since last update.

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%;
}