Home
CSS
【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

公開日
2021.05.16
更新日
2022.04.02
【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

どうも!かけちまるです!

Webサイトで動画を扱うとき、YouTubeの埋め込みをよく使うと思います。
でもレスポンシブにしようとすると縦横比が崩れてあんまり綺麗にならずに悩んでる方いませんか?

その縦横比、保つ方法あるんです。
てことでこの記事ではYouTube埋め込みを縦横比を保ちながらレスポンシブ対応にする方法をご紹介します。

この記事を読むと、

  • ・縦横比を保ちながらレスポンシブ対応
  • ・padding-topを使う方法
  • ・CSSの新プロパティaspect-ratioを使う方法

が理解できます。

padding-topを使ってレスポンシブ対応

padding-topを利用して縦横比を保つ方法をご紹介します。

基本のHTML

基本のHTMLは以下です。
任意のYouTube埋め込みコードをdiv要素で囲んでいます。
div要素は縦横比を保つための要素です。

HTML
コピー
<div class="youtube_wrap"> <iframe width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>

このHTMLにCSSをあてていきます。

縦横比を保つCSS

padding-topを利用して縦横比を保つCSSは以下になります。

CSS
コピー
.youtube_wrap{ padding-top: 56.25%; width: 100%; position: relative; } .youtube_wrap iframe{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }

CSSの解説

padding-topを利用して縦横比を保つCSSの解説をします。

なぜ、padding-top: 56.25%;を指定しているか?

まず知っておいて欲しいことが2つあります。

  • ・padding-top: 100%;はwidth: 100%;と同じ幅である。
  • ・YouTubeのアスペクト比は16:9である。

YouTubeに合わせてアスペクト比を16:9にすると、width100%(16)の場合padding-top56.25%(9)になるというわけです。

padding-topを求める公式
  • やりたい比率 = widthの値 : padding-topの値
  • 16 : 9 = 100% : y
  • 16 × y = 100 × 9
  • 16y = 900
  • y = 900 ÷ 16
  • y = 56.25%

aspect-ratioを使ってレスポンシブ対応

aspect-ratioとは?

2021年1月19日にChrome 88リリースされ、CSSのaspect-ratioプロパティがサポートされました。
aspect-ratioプロパティは、ボックスや動画、画像のアスペクト比を指定することができます。

ブラウザサポート状況(21.05.16時点)

aspect-ratioプロパティのサポート状況はというとまだリリースされたばかりなのでサポートしているブラウザは少ないです。
これから徐々にサポートされていくと思われます。

IE Edge Firefox Chrome Safari iOS Android
aspect-ratio × 88~ 89~ 88~ × × 90

最新のサポート状況はこちら
https://caniuse.com/?search=aspect-ratio

基本のHTML

基本のHTMLは以下です。
任意のYouTube埋め込みコードをコピペしてくるだけです。

HTML
コピー
<iframe class="youtube_ifreme" width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このHTMLにCSSをあてていきます。

縦横比を保つCSS

aspect-ratioを利用して縦横比を保つCSSは以下になります。

CSS
コピー
.youtube_ifreme{ aspect-ratio: 16 / 9; width: 100%; height: auto; }

aspect-ratioプロパティがサポートされていないブラウザでは正しく表示されません。

CSSの解説

padding-topを使う方法よりもHTMLとCSSがシンプルですね。

YouTubeの埋め込みタグのaspect-ratioを指定します。
YouTubeのアスペクト比は16:9なのでaspect-ratio: 16 / 9;と指定します。

あとは、widthを任意の値で指定し、heightautoに指定してあげます。
そうするとアスペクト比を16:9に保ったままレスポンシブになってくれます。

まとめ

YouTube埋め込みを縦横比を保ちながらレスポンシブ対応する方法を2つご紹介しました。
オススメの方法はpadding-topを使う方法です。
aspect-ratioを使う方法の方がシンプルだし便利なんですが、まだサポートしていないブラウザがあるので使いにくいですね。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【PHP】json_encode()とjson_decode()でJSONを操る

【PHP】json_encode()とjson_decode()でJSONを操る

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

webpack環境で画像追加を監視して自動圧縮&WebP変換する方法

webpack環境で画像追加を監視して自動圧縮&WebP変換する方法

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション

positionで要素を中央寄せにする方法【CSS】

positionで要素を中央寄せにする方法【CSS】