CSSでYouTubeの埋め込みを比率維持したままレスポンシブ対応させる方法。

YouTubeの埋め込みを比率維持したままレスポンシブ対応させる方法をご紹介します。

手順１：divタグ追加

iframeタグを囲うようdivタグを追加します。

<div class="yt"><iframe width="560" height="315" src="https://www.youtube.com/embed/poQlNeb7a-U?si=3f6M3b0t2lnHaBH_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>

手順２：css追加

cssを追加していきます。

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

完成

以上、簡単な方法ですので是非お試しください。