YouTubeの埋め込みを比率維持したままレスポンシブ対応させる方法をご紹介します。
手順1:divタグ追加
iframeタグを囲うようdivタグを追加します。
<div class="yt"><iframe width="560" height="315" src="https://www.youtube.com/embed/6qso-Oe20B0?si=4Ngoy6FQV4EXs4xb&controls=0" 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>
手順2:css追加
cssを追加していきます。
.yt {
width: 100%;
aspect-ratio: 16 / 9;
}
.yt iframe {
width: 100%;
height: 100%;
}
以上、簡単な方法ですので是非お試しください。