<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>
.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%; }