Html код видео YouTube, растягивать высоту относительно ширины возможно?

Question

[Алексей Напечкин]

Что можно указать в height, чтобы высота автоматически подстраивалась под ширину и не было чёрного фона по бокам видео? auto <- не работает.

<iframe width="100%" height="" src="https://www.youtube.com/embed/Zh1zprk92s8" frameborder="0" allowfullscreen></iframe>

Answer 1

[Anna_BS]

.video {
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
}
.video iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

codepen

Answer 2

[tecs]

огромное спасибо.
только добавлю для пионеров:

<div class="video">
  <iframe id="youtube1" width="100%" src="https://www.youtube.com/embed/nWdInJYfcOY?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>