YouTube動画の埋め込みをレスポンシブ対応する方法(WordPressのGutenbergでの対応も!)

ウェブサイトでYouTubeを埋め込む際にレスポンシブ対応させる方法を記します。

デモ

まずはデモをご確認ください。

DEMO

CSSで対応する2種類の方法

aspect-ratioで対応させる方法

aspect-ratioはアスペクト比を指定するcssです。
アスペクト比とは縦横の比率のことです。

現在の一般的な考え方でいうと最近のテレビは16:9、スマートフォンは2:1、タブレットは4:3が基本的なアスペクト比となっております。
※iPhone13は9:19.5となっており、Androidはそれよりも縦長の端末があるので一概に2:1とはいえませんが…

アスペクト比を指定することでレスポンシブ対応させる方法は以下の通りです。

YouTubeで取得した下記の埋め込みコードをレスポンシブ対応させます。

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

html

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

css

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

YouTube埋め込み動画のデフォルトの比率が横560px、縦315pxとなっているため比率でいうと16:9となります。
よってiframeを囲むdiv要素にaspect-ratio: 16 / 9 ;を指定するとアスペクト比を保て、widthに100%を指定するとブラウザサイズに追従させることができます。

aspect-ratioの対応状況は以下の通りです。

Can I use

2021年11月5日時点でIE以外のブラウザに対応しておりますが、少し古いバージョンのSafariとiOS Safariを切り捨てるかは悩ましいところです。

Can I useによると現在のユーザーが使用しているブラウザの対応状況はGlobal77.23%、Japan67.74%となっており、商業デザインで使用する場合90%はほしいので、表示が崩れる可能性があるのであれば下記のpadding-topのハックを採用してください。

padding-topで対応させる方法

昔からあるハックです。
padding-topを使ってアスペクト比を指定します。

html

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

css

.youtube__padding-top {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube__padding-top iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

padding-top: 56.25% ;とは9を16で割り100をかけた値となります。

16:9, 4:3, 2:1の各アスペクト比を指定する場合は以下の通りです。

16:9 … 9/16*100=56.25%
4:3 … 3/4*100=75%
2:1 … 1/2*100=50%
1:1(正方形)… 1/1*100=100%

WordPressのGutenbergでレスポンシブ対応させるための記述

WordPressのGutenbergでYouTubeのレスポンシブ対応を行いたい場合は以下のcssを追加することで対応可能です。

css

.wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}

.wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% ;
	height: 100% ;
}

FOLLOW US SNSで最新情報をチェック!

KEYWORD 話題のキーワード!

PREVIOUS POST Photoshopを100倍使いやすく!おすすめの環境設定と厳選4つのキーボードショートカット
NEXT POST photoshopのリンクファイルをパッケージ化して共有に強いファイル構造に!
PAGE TOP