【CSS】YouTube動画のアスペクト比を維持してレスポンシブに対応する方法

YouTubeの埋め込みタグをコピペして、ソースコードに貼り付けるだけで、簡単にYouTube動画を掲載することができます。
しかし、コピペしたコードを貼り付けるだけでは、レスポンシブの際にブラウザ幅からはみ出て表示が崩れてしまうことがあります。
今回はブラウザ幅が可変した場合でも、動画のアスペクト比が崩れずに、綺麗に表示する方法をご紹介します。

サンプル

今回実装するサンプルになります。
ブラウザ幅を可変しても、アスペクト比は保たれるようになっています。

HTML

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

iframeタグは、YouTubeで生成した埋め込みタグをコピペして持ってきてます。
その外側のdivタグに、クラス名「video」を付けておきます。

CSS

.video{
	position: relative;
	padding-top: calc(9 / 16 * 100%);
}
iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

クラス名「.video」の、padding-topでアスペクト比を指定しています。
「9 / 16 * 100%」の部分は、「縦幅 / 横幅 * 100%」という意味になっており、この計算をすることでアスペクト比を保ってくれます。
アスペクト比を「3:2」にしたい場合は「2 / 3 * 100%」と変更することもできます。

タグ名「iframe」には「position: absolute」を指定して、親要素で指定したアスペクト比を起点として表示させます。

以上。YouTube動画のアスペクト比を維持して表示する方法になります。
よかったら参考にしてみてください。