Как с помощью CSS создать адаптивное видео на сайте, которое сохраняет пропорции 16:9 при изменении ширины родительского контейнера?

Создание адаптивного видео с сохранением пропорций 16:9 — одна из классических задач верстки. Существует несколько подходов, каждый из которых подходит для разных ситуаций.

## Метод 1: Padding-trick (классический способ)

Самый распространённый и поддерживаемый метод основан на особенности CSS: если задать элементу `padding-bottom` в процентах, он вычисляется относительно ширины родителя, а не высоты.

Для соотношения 16:9 нужно вычислить: 9 / 16 × 100% = 56.25%.

css
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML-разметка:
html

Обёртка получает нулевую высоту, а нижний отступ создаёт пространство. Видео растягивается на всю площадь обёртки через `position: absolute`.

## Метод 2: Свойство aspect-ratio (современный способ)

Современные браузеры поддерживают свойство `aspect-ratio`, которое делает код значительно чище:

css
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}

.video-wrapper iframe,
.video-wrapper video {
width: 100%;
height: 100%;
display: block;
}

Этот метод поддерживается во всех современных браузерах начиная с 2021 года (Chrome 88+, Firefox 89+, Safari 15+). Для старых браузеров лучше использовать padding-trick как запасной вариант.

## Метод 3: Комбинированный подход с @supports

Для максимальной совместимости можно объединить оба метода:

css
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}

@supports (aspect-ratio: 16 / 9) {
.video-wrapper {
padding-bottom: 0;
height: auto;
aspect-ratio: 16 / 9;
}
}

.video-wrapper iframe,
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

## Ограничение максимальной ширины

Чтобы видео не растягивалось на весь экран на широких мониторах, добавьте ограничение:

css
.video-container {
max-width: 960px;
margin: 0 auto;
}

## Советы по применению

— Для соотношения 4:3 используйте `padding-bottom: 75%`
— Для соотношения 21:9 (ультраширокое) — `padding-bottom: 42.85%`
— Всегда добавляйте `overflow: hidden` к обёртке, чтобы избежать выхода контента за границы
— При использовании Flexbox или Grid убедитесь, что обёртка не теряет ширину из-за родительских стилей

Классический padding-trick работает во всех браузерах без исключения, а `aspect-ratio` — более читаемое и современное решение для актуальных проектов.