LoginSignup
56

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-04-05

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
56