CSS：YouTubeタグ埋め込みでスポンシブ対応
YouTubeタグ埋め込みで比率を維持したままスポンシブ対応させる方法のメモ。
<div class="youtube-tag">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/********?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>paddingの場合
.youtube-tag{
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube-tag iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}aspect-ratioの場合
.youtube-tag iframe {
width: 100%;
aspect-ratio: 16 / 9;
}aspect-ratioは、あまり使用したことはないですが、モダンブラザーで対応しているようです。
https://caniuse.com/mdn-css_properties_aspect-ratio
