置き換えるときの注意点

• 中身が比率より高くなると、ボックスは中身に合わせて伸びます。 比率を崩したくない場合はmin-height: 0かoverflow: autoを併用します。
• widthとheightの両方をauto以外にすると、aspect-ratioは効きません。 どちらか一方はautoにしておきます。
• <img>や<video>は、HTMLにwidth・height属性を書いておけば、ブラウザが読み込み前から比率を確保します。 CSSはheight: autoだけで済み、読み込み時のレイアウトのずれも防げます。

フォールバック

対象の5ブラウザはすべて対応済みなので、通常は古い書き方を残す必要はありません。 古いブラウザも支える必要がある場合だけ、@supportsで分岐して以前の書き方に戻します。 以前の書き方はラッパー要素を前提にするため、HTMLにはiframeを囲む.videoを残しておきます。

@supports not (aspect-ratio: 1) {
  .video {
    position: relative;
    height: 0;
    padding-top: 56.25%;
  }

  .video > iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}