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!!
Top comments (0)