YouTubeなどのiframe埋め込みのレスポンシブ対応

2023.03.10(Fri)

Web制作

Webサイトに Youtube などの iframe を埋め込む時に、レスポンシブ対応で困ったことありませんか？

スマホ用レイアウト時に

//CSS

.youtube iframe{
  width: 100%;
  height: auto;
}

これだと高さが潰れちゃうんですよね。

こんな時に aspect-ratio プロパティが便利です。

aspect-ratio は2021年1月にChromeでサポートが開始され、今では全てのエバーグリーンブラウザでサポートされています。

※エバーグリーンブラウザ・・・自動で最新版にアップデートされるブラウザ

//HTML

<div class="youtube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/-3echUj1GrM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

//CSS

.youtube iframe{
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  border: none;
}

これでスマホでも iframe の縦横比を保ったままレスポンシブ対応ができます。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。

ブログ

YouTubeなどのiframe埋め込みのレスポンシブ対応

おすすめ記事