開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

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

最終更新:2016-11-24 by Joe

通常、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%の値を取ります。(これは「仕様」です。)

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

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

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

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

閉じる