Как сделать, чтобы высота iframe была равна соотношению 16:9?

Question

[Арсений Смирнов]

Здравствуйте!
У меня mobile-first верстка и при встраивание видео с ютуба у меня удалось растянуть видео на всю ширину при этом сохраняя пропорции 16:9, но вот когда я стал делать десктопную версию, то у меня произошла небольшая проблемка, видео не сохраняет пропорции, его высота стала зависеть от высоты текста слева от видео.
Подскажите пожалуйста как это можно исправить и естественно, чтобы это было адаптивно.
https://codepen.io/Belzer/pen/wvYagPL

Answer 1

[Ivan Bogachev]

пропорции 16:9

Ну так:

.whois-video {
    aspect-ratio: 16 / 9;
}

И да, это уже можно делать. Пора уже забыть эти хаки с padding.

Answer 2

[alexalexes]

Чтобы сохранить пропорции при отображении в любом браузере, нужно сделать контейнер под видео с относительным позиционированием:

.video__container
{
  position: relative;
}

И в него положить img от png файла с однотонным заполнением с нужным соотношением сторон (можно в виде встроенного бинарника сформировать ресурс, такой файл в эквиваленте png весит пару сотен байт).
Для iframe сделать абсолютное позиционирование, чтобы можно было его приподнять над img блоком, с помощью z-index, и задать 100% ширину и высоту, чтобы его размер зависел от контейнера, а размер (точнее, пропорции) контейнера будет зависеть от размера img.

iframe.video__iframe
{
  position: absolute;
  z-index: 1;
  /* width и height устанавливаются в атрибутах iframe! */
}

В итоге получится такая конструкция:

<div class="video__container">
  <img src="video-iframe-background-1920x1080.png"/>
  <iframe class="video__iframe" src="" width="100%" height="100%"></iframe>
</div>

Такой подход позволяет гибко настраиваться размерам контейнеру .video__container, или фиксировать один из его размеров. При этом, iframe всегда будет держать пропорции того изображения, которое заложено в img. И это будет работать практически на любом браузере не первой свежести.