Адаптивно вставляем (embed) видео с YouTube Иногда требуется в | Интерфейсизация | Vue, Nuxt, Frontend, IT

Адаптивно вставляем (embed) видео с YouTube
Иногда требуется вставить на сайт iframe, например видео с YouTube. Для корректного адаптивного отображения видео необходимо соблюдать пропорцию ширины и высоты. Раньше это делали с помощью хаков, например, один из подходов - задавать padding в процентах.

aspect-ratio
В 2021 году начала появлятся поддержка свойства aspect-ratio. Достаточно задать необходимое соотношение.

.youtube-iframe {
width: 100%;
aspect-ratio: 16 / 9;
}

Согласно CanIUse поддержка свойства чуть больше 91%. В случае необходимости, можно сделать fallback с помощью @supports not (aspect-ratio: 16 / 9)