【CSS】Youtubeの動画をレスポンシブ対応！

Youtube動画を埋め込む際に普通にCSSで「width: 100%」でいいじゃないと思うけど、高さが出なくて表示されない。でもこのコードで1発解決！
HTMLとともにご確認を。

HTML

// Youtubeからコピーしたコード
<iframe width="560" height="315" src="https://www.youtube.com/embed/NkRkuI0ZgX0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

CSS

.video-container {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
}
.video-container iframe {
  width: 100%;
  height: 100%;
}

実際にこのコードで表示してみると…

Youtubeからコピーした動画には、「.video-container」クラスが付いており、そこに「max-width」が設定してあるためうまく100%表示にできませんでした。それを解除し「aspect-ratio」で比率を指定すると、比率と高さを保った動画を表示できます。
ちなみにこの動画は、最近お気に入りのサルバトーレ・ガナッチ(Salvatore Ganacci)さん。
音楽もキャラクターも最高な音楽家です。良ければ他の曲も聞いてみてね！