Things to watch when replacing

• If the content is taller than the ratio allows, the box grows to fit it. To keep the ratio, combine it with min-height: 0 or overflow: auto.
• aspect-ratio has no effect when both width and height are set to something other than auto. Leave one of them as auto.
• For <img> and <video>, writing the width and height attributes in HTML lets the browser reserve the ratio before the media loads. The CSS only needs height: auto, and layout shifts on load are avoided.

Fallback

All five target browsers support it, so you normally don’t need to keep the old technique. Only when you also have to support older browsers, branch with @supports and fall back to the old technique. Because the old technique relies on a wrapper element, keep the .video element around the iframe in the HTML.

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

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