YouTubeを埋め込む際、CSSだけでアスペクト比を固定する

YouTube動画を埋め込む際、縦横比を固定したまま幅を可変にできるCSSです。

HTML

<div class="wrapper">
  <iframe src="https://www.youtube.com/embed/QO6fChKB20Y?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen class="item"></iframe>
</div>

インラインフレームをラッパーで囲み、それぞれにクラスを付けておきます。

CSS

.wrapper {
  position: relative;
  width: 100%;
}

.wrapper:before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

仮で16:9の比率にしていますが、目的に応じて変更してください。
56.25%の箇所が比率を指定している箇所です。