Youtubeの埋込iFrameで、横幅をぴったり広げてレスポンシブにする方法

最終更新:2022-08-09 by Joe

通常、WEBページ内に、YoutubeのiFrame(アイフレーム)で埋め込むと、横幅、縦の長さが固定されてしまいます。

この記事では、埋め込んだYoutube iFrame部分を、画面の横幅いっぱいに(100%に)広げる方法をご紹介します。

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

ブログなどにYoutubeのiFrameを埋め込んで、横幅を最大で表示したいときに必須な調整となります。

まずは、実装例から、HTMLでは、iFrameを特定のDIVで囲んでやる必要があります。

HTML とクラス設定

<div class="youtube-wrapper">
<iframe src="https://www.youtube.com/embed/ChOhcHD8fBA" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

CSS(スタイルシート)

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

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

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

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

このようなことは仕様書で定義されています。ちょっと小難しくなりますが、こちら:
https://www.w3.org/TR/CSS21/visudet.html