Как сделать видео адаптивным на сайте и сохранить правильные пропорции

Автор: Вадим Белов | Опубликовано: 12.10.2026

Если видео на сайте расползается за блок, обрезается по краям или выглядит слишком мелким на телефоне, проблема почти всегда в том, что плеер задан жесткими шириной и высотой без учета соотношения сторон. Для адаптивной верстки это неудобно: контейнер меняет размер, а видео — нет. Решение зависит от того, что именно вы вставляете: iframe с YouTube, VK Видео, RuTube или собственный HTML5-ролик.

Ниже — рабочие способы, которые реально используют на сайтах: от простого CSS для встраиваемых плееров до настройки собственного видео в WordPress. Заодно разберем, как не потерять пропорции 16:9, 4:3 или вертикального видео и что проверить после внедрения.

Что значит адаптивное видео на практике

Адаптивное видео не должно иметь фиксированную ширину, привязанную к экрану, и не должно ломать сетку страницы. При этом у него сохраняется исходное соотношение сторон: например, 16:9 для большинства роликов, 4:3 для старых записей или 9:16 для вертикального контента.

На практике это означает три вещи:

плеер занимает всю ширину доступного контейнера;
высота рассчитывается автоматически по пропорции;
на мобильных устройствах видео не выходит за пределы экрана и не требует горизонтальной прокрутки.

Если у вас на странице несколько типов видео, лучше не пытаться задавать всем один и тот же размер вручную. Для каждого формата удобнее использовать общий адаптивный контейнер и менять только соотношение сторон.

Самый надежный способ для iframe: обернуть видео в контейнер с нужной пропорцией

Это основной вариант для YouTube, VK Видео, RuTube, Дзена и других платформ, которые вставляются через iframe. Сам iframe лучше не растягивать стилями напрямую, а поместить в обертку, которая и отвечает за пропорции.

Для классического видео 16:9 подойдет такой CSS:

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrap iframe,
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

HTML при этом будет простым:

<div class="video-wrap">
  <iframe src="https://www.youtube.com/embed/ID_ВИДЕО" allowfullscreen></iframe>
</div>

Свойство aspect-ratio поддерживается современными браузерами и обычно достаточно для большинства проектов. Если сайт должен корректно работать в очень старых браузерах, можно использовать старый прием с padding-top, но на обычных проектах он уже не нужен.

Если видео вертикальное, меняете пропорцию на 9 / 16. Для 4:3 — на 4 / 3. Это самый чистый способ сохранить правильные размеры без обрезки.

Как сделать адаптивным HTML5 video

Если вы вставляете собственный файл через тег video, логика та же: сам элемент должен занимать 100% ширины контейнера, а высота должна следовать за пропорцией. В WordPress это часто используют для локальных MP4, если видео действительно нужно хранить на своем сервере или в объектном хранилище.

Рабочий вариант выглядит так:

<div class="video-wrap">
  <video controls preload="metadata" poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

И тот же CSS для контейнера:

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Здесь важен object-fit: contain. Он помогает не обрезать кадр внутри блока. Если поставить cover, видео может заполнить контейнер красивее, но часть изображения будет обрезана — для большинства сайтов это нежелательно.

Если вы не уверены в исходной пропорции ролика, сначала проверьте его в медиаплеере или в свойствах файла. Ошибка в соотношении сторон обычно заметна сразу: видео выглядит сплюснутым, растянутым или с черными полями не там, где ожидалось.

Что делать в WordPress: блоки, embed и кастомный HTML

В WordPress задача обычно решается без плагинов. Если вы вставляете ссылку на YouTube, VK Видео или RuTube в отдельный блок, редактор часто сам превращает ее в embed. Но адаптивность все равно зависит от темы и CSS сайта.

Если тема уже корректно стилизует встроенные видео, ничего менять не нужно. Если нет — добавьте обертку вручную в блок «Произвольный HTML» или через блок «Группа» с классом, например video-wrap. Затем подключите CSS в настройках темы или в «Дополнительных стилях».

Для сайтов, где видео нужно показывать в едином оформлении из разных источников, удобен плагин OmniVideo от WPShop: он помогает вставлять ролики с YouTube, VK Видео, RuTube и других сервисов в более предсказуемом виде и упрощает работу с плеером и постером. Это не обязательное решение, но оно полезно, если на сайте много видео и вы хотите избежать ручной правки каждого embed-кода.

Как не испортить пропорции на мобильных устройствах

Частая ошибка — задать видео width: 100%, но оставить фиксированную высоту. На десктопе это еще может выглядеть терпимо, а на телефоне плеер начинает сжиматься или, наоборот, вылезает за блок.

Чтобы этого не было, проверьте три момента:

у контейнера нет фиксированной высоты в пикселях;
у iframe или video задано width: 100% и height: 100% внутри адаптивной обертки;
родительский блок не ограничивает видео лишними overflow: hidden и жесткими отступами, если они не нужны для дизайна.

Если видео стоит в карточке товара или в узкой колонке, особенно важно не задавать ему максимальную ширину больше контейнера. В таких макетах лучше, чтобы видео подстраивалось под колонку, а не под общий экран.

Когда видео лучше не хранить на своем хостинге

Адаптивность — это только часть задачи. Если вы загружаете большие MP4 прямо на обычный виртуальный хостинг, можно быстро упереться в лимиты диска, трафика и скорости отдачи файлов. На небольшом сайте это иногда работает, но для регулярной публикации видео такой подход часто создает проблемы с производительностью.

Если ролик нужен только для показа на странице, обычно безопаснее использовать видеохостинг или объектное хранилище, а на сайт вставлять плеер через embed или HTML5-ссылку. Тогда страница не будет тянуть на себя тяжелую раздачу видеофайла, а вы сможете сосредоточиться на адаптивной верстке и скорости загрузки самой страницы.

Отдельно учитывайте, что внешний плеер грузит не только сам ролик, но и скрипты платформы. Поэтому на страницах с несколькими видео имеет смысл использовать lazy load или отложенную загрузку плеера до клика пользователя, если это поддерживается темой, плагином или вашим кодом.

Как проверить, что все работает правильно

После настройки откройте страницу в браузере и проверьте ее в нескольких ширинах экрана: десктоп, планшет и телефон. Важно смотреть не только на внешний вид, но и на поведение блока при изменении ширины окна.

Проверьте следующее:

видео не выходит за границы контейнера;
нет горизонтальной прокрутки страницы;
плеер сохраняет нужную пропорцию;
кнопки управления доступны и не обрезаны;
на мобильном видео не перекрывает соседние блоки.

Если используете iframe, откройте исходный код или инспектор и убедитесь, что сам iframe не получил жесткую высоту из темы или плагина. Иногда проблема не в вашем CSS, а в стилях шаблона, которые переопределяют размеры встроенного плеера.

Если видео все равно обрезается или растягивается

Тогда причина обычно не в одном месте, а в сочетании нескольких факторов: тема задает свои стили, плагин добавляет обертку, а сам плеер приходит с фиксированными размерами. В таких случаях проще идти по цепочке: сначала убрать лишние стили у контейнера, потом проверить embed-код, затем посмотреть, не вмешивается ли кэш или оптимизатор CSS.

Если у вас нестандартная тема или сложная верстка карточек, иногда быстрее и надежнее вынести видео в отдельный универсальный класс и использовать его везде одинаково. Это особенно удобно для статей, лендингов и карточек товаров, где один и тот же ролик должен выглядеть предсказуемо на всех устройствах.

В большинстве случаев для решения задачи достаточно одного правила: не задавайте видео фиксированные размеры напрямую, а управляйте ими через адаптивный контейнер с правильным соотношением сторон. Тогда ролик не вылезет за блок, не обрежется и будет нормально смотреться на мобильных устройствах.