Aspect Ratio DOM Design

Here list two ways to implement "aspect ratio DOM design". One is using "padding" and another is using "aspect-ratio".

by hugogo7646

HTML

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

<div>Use "aspect-ratio" way:</div>
<iframe class="aspect-ratio" src="https://www.youtube.com/embed/Cu8NnGwYZp0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

CSS

.wrapper {
  width: 80%;
}

.box {
  width: 100%;
  padding-top: 56.25%;
  height: 0;
  position: relative;
}

.box-in {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.aspect-ratio {
  aspect-ratio: 16 / 9;
  width: 80%;
}