An easy way to keep iframe with 16:9 aspect ratio without outer div (Pure CSS)

Youtube video provides a embedded code to let us embed iframe in our web page. However, we need the youtube video on the page to keep aspect ratio 16:9.

There is an easy way to do this, a pure css code aspect-ratio property as below code:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

We keep the width 100% and height auto, and also keep the aspect ratio with 16:9.

There is an example:

https://codepen.io/timhuang/pen/BaYdMmN

And also check the aspect-ratio property browser compatibility:

https://caniuse.com/mdn-css_properties_aspect-ratio

Most browsers support this property, but some old browsers don't support, we can use old way with an outer div, also check this post:

https://dev.to/jh3y/css-aspect-ratio-2k6o (Thanks Tompkins https://dev.to/jh3y)

Happy coding!!