キタックCGソリューションセンター

制作室の叫び

CSSの小ネタ:YouTube埋め込みのレスポンシブ対応 ~IEが滅んだ世界で~

2022年07月27日(水)

PV 95

ついにInternet Explorerのサポートが終了しましたね。
先月のことですけど。
「IEで崩れています」という聞いた瞬間に血圧が50くらい上がる言葉をもう聞かなくて済むと思うと仕事が楽しくなりますね。
なるかな。ならんな。

せっかくIEが滅んだのでIE11をガン無視したコーディングをしたいですよね。

というわけで小ネタを一つ……
よくある「YouTubeの埋め込みのレスポンシブ対応」です。こんなん。

IE11が生きていた世界では、外側のdivheight0にしてpadding-top56.25%(動画が16:9の場合)にして、内側のiframeposition: absoluteで配置する方法が一般的だったと思います。
こんなん。

<div class="youtube">
  <div class="inner">
    <iframe...>
  </div>
</div>
.youtube{
  width: 90%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.inner{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.inner > iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  hegiht: 100%;
}

YouTubeの動画を、親要素の幅90%、最大幅640pxでセンター配置する感じのコードです。
めんどうくさいですね。

IEをガン無視する場合は以下のようなコードでOKです。

<div class="youtube">
  <iframe...>
</div>
.youtube{
  width: 90%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin-left: auto;
  margin-right: auto;
}
.youtube > iframe{
  width: 100%;
  height: 100%;
}

IE11では使えなかったaspect-ratioプロパティを使えばすぐです。
こいつで要素の比率を指定できます。
いやー、楽ちんですね。

aspect-ratioプロパティの詳しい説明はこちら。
https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio

まぁ、だいぶ前からこの方法もいろんなところで紹介されてますけどね……
IEが死んだので改めてね……

では。

Share プリーズ
書き手は私

よろしければどうかご感想を!

※コメントは、サイト管理者による承認後、ページに表示されます。

あたたかい感想を書く

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


キタックCGSCコアメンバー

  • 樋口大輔
  • 小林将太
  • ちゃんまき
  • 高橋どらみ
  • 高橋皓一
  • 笠井
  • 石本
  • 佐藤サバ美
  • 佐久間尭