Как изменить размер iframe, поддерживая коэффициент?

Question

Я попытался изменить размер iframe на моей веб-странице, но только ширина становится больше. Добавленный CSS я:

iframe { 

    min-width: 100%; 
    min-height: 100%; 
    max-width: 100%; 
    max-height: 100%; 

} 

Но это только уменьшает ширину. Как изменить размер высоты, чтобы поддерживать качество видео в YouTube? Нужно ли изменять размер окружающего компонента? HTML является

<div class="abstract"> 
      <div class="abstract-inner"> 

       <iframe width="512" height="288" src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 

      </div> 
      </div> 

Answer 1

.abstract{ 
 

 
    max-width: 700px;/*for example*/ 
 

 
} 
 
.abstract-inner { 
 
    position: relative; 
 
    padding-bottom: 56.25%; /*288/512=0.5625*/ 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
.abstract-inner iframe{ 
 
    position: absolute; top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="abstract"> 
 
<div class="abstract-inner"> 
 
    <iframe width="512" height="288" src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
 

 
</div> 
 
</div>