Youtubeをレスポンシブで埋め込む方法【縦横比が崩れない裏ワザ】

2020.01.05 2020.12.17 コーディング

今回は、Youtube動画をレスポンシブで埋め込む方法についてのメモ。

Youtubeをサイトにレスポンシブで埋め込む方法はいろいろなところですでに紹介されていますが、よくある方法だと全幅（画面幅いっぱい）でないときにアスペクト比（縦横比）が崩れることがあります。

この辺りを解消する小技も含めて、お伝えしていきます。

Youtubeをレスポンシブで埋め込む方法

まずはソースコードから。

以下のような形で埋め込むと、全幅でもそうでないときもアスペクト比が崩れずに表示できます。

HTML

<div class="youtube">
	<div class="inner">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/XE2bq4ssPiY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	<!-- .inner -->
	</div>
<!-- .youtube -->
</div>

CSS

.youtube {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}

.youtube .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.youtube .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

ポイントとなるのは、次の4つです。

埋め込みコードを囲う要素(div.inner)を相対配置(relative)にしてheightを0に
div.innerのpadding-top(padding-bottomでも可)で高さをパーセント指定
埋め込みコードを絶対配置(absolute)して幅・高さともに100%指定
埋め込みコードを二重に囲んでおく（div.youtube > div.inner > iframe）

padding-topは56.25%にしておくと、上下に余白ができずキレイに埋め込めます。

埋め込みコードを二重に囲んでおくと横幅が自由自在に

Googleマップをレスポンシブで埋め込む方法をご紹介した際にも触れましたが、Youtubeも埋め込みコードをdivなどで二重に囲んでおくと横幅の調整がしやすいです。

Youtubeをレスポンシブで埋め込む方法【縦横比が崩れない裏ワザ】

paddingを%で指定した場合、その基準は親要素の幅になります。

例えば親要素が1000pxのところに40%と指定すれば、上下左右どこのpaddingでも400pxになるわけですね。

Youtubeをレスポンシブで埋め込むために以下のようなソースコードを紹介されることが多いですが、これだと画面の幅いっぱいに表示させる場合には問題ありませんが、そうでないときはアスペクト比が崩れます。

HTML

<div class="youtube">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/XE2bq4ssPiY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- .youtube -->
</div>

CSS

.youtube {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

例えばYoutubeを画面幅の80%のサイズで表示させたい場合、div.youtubeのwidthを80%に変更することになります。

そうなると100(幅):56.25(高さ)という比率が崩れてしまうので、余白ができないように都度paddingの値を調整してやる必要が出てきます。

.youtube {
	width: 80%; /* アスペクト比が崩れる */
	padding-top: 56.25%; /* アスペクト比が崩れる */
	position: relative;
	height: 0;
	overflow: hidden;
	box-sizing: border-box;
}

しかし埋め込みコードを二重に囲み、直接の親要素のwidthはいじらずに、親の親にあたる要素で幅を調整するようにすればアスペクト比を崩さずに調整することが可能になります。

HTML

<div class="youtube">
	<div class="inner">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/XE2bq4ssPiY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	<!-- .inner -->
	</div>
<!-- .youtube -->
</div>

CSS

.youtube {
	width: 80%; /* 横幅変更 */
	padding: 0;
	box-sizing: border-box;
}

.youtube .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.youtube .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}