Как сделать адаптивное видео в Elementor с помощью aspect-ratio

Почему видео в Elementor ломает мобильную версию

Видео YouTube и Vimeo обычно встраиваются в формате iframe. Сам iframe может иметь собственные размеры или получать их от виджета, темы или стороннего кода. На широком экране это может быть незаметно, но на смартфоне фиксированная ширина или высота становится больше контейнера.

Ещё одна распространённая проблема — отсутствие зарезервированного места до завершения загрузки контента. Сначала страница отображается без видео, а затем iframe добавляет свою высоту. Из-за этого заголовки, кнопки и другие блоки смещаются вниз.

Свойство aspect-ratio задаёт соотношение ширины и высоты элемента. Например, 16 / 9 означает, что блок будет сохранять пропорции стандартного горизонтального видео независимо от ширины колонки.

• iframe не выходит за пределы родительского контейнера;
• видео не искажается при изменении ширины экрана;
• для видео заранее резервируется правильная высота;
• снижается риск появления горизонтальной прокрутки.

Как подготовить контейнер для видео в Elementor

Создайте отдельный контейнер вокруг видео. Он должен быть родительским элементом для iframe или виджета, который выводит iframe. Отдельную обёртку удобно использовать, чтобы не менять стили других видео на сайте.

В расширенных настройках контейнера можно добавить класс video-frame. Он не обязателен, если CSS вставляется непосредственно в Custom CSS этого контейнера, но класс пригодится для глобальных стилей или повторного использования оформления.

Убедитесь, что контейнер не имеет заданной фиксированной высоты. Если одновременно указаны height, min-height или жёсткие отступы, они могут конфликтовать с aspect-ratio.

• добавьте контейнер нужной ширины;
• разместите в нём видео или код YouTube/Vimeo;
• при необходимости добавьте класс video-frame;
• проверьте, что родительский контейнер не обрезает видео из-за неожиданных стилей.

CSS для адаптивного видео YouTube или Vimeo

Если в вашей версии Elementor доступен Custom CSS, вставьте код ниже непосредственно в настройки обёртки. Селектор selector автоматически ссылается на текущий элемент, в котором сохранён этот CSS.

selector {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  position: relative;
}

selector iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  inset: 0;
}

Как работает этот код

aspect-ratio: 16 / 9 задаёт пропорции обёртки. width: 100% заставляет её занимать доступную ширину родительского контейнера, а position: relative создаёт систему координат для iframe.

Для самого iframe заданы position: absolute и inset: 0. Это размещает его по всем четырём границам обёртки. Свойства width: 100% и height: 100% растягивают видео на всё зарезервированное пространство.

overflow: hidden скрывает части содержимого, которые случайно могут выйти за границы рамки. При этом данное свойство не заменяет правильную настройку ширины: оно лишь защищает контейнер от переполнения.

Вариант с глобальным CSS

Если Custom CSS недоступен, те же правила можно добавить в глобальные стили сайта или CSS темы. В таком случае вместо selector используйте класс, назначенный контейнеру.

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

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

Как выбрать правильное соотношение сторон

Для большинства горизонтальных видео с YouTube и Vimeo подходит 16 / 9. Это не меняет пропорции самого ролика, а только определяет форму области, в которой он отображается.

Для вертикальных видео, снятых на телефон, Stories или Reels используйте 9 / 16. Если ролик квадратный, задайте 1 / 1. Для нестандартного формата можно указать собственное соотношение, например 4 / 3.

• горизонтальное видео: aspect-ratio: 16 / 9;
• вертикальное видео: aspect-ratio: 9 / 16;
• квадратное видео: aspect-ratio: 1 / 1;
• старые записи в формате 4:3: aspect-ratio: 4 / 3.

Проверка результата на разных экранах

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

Также откройте страницу в обычном режиме браузера, а не только в редакторе Elementor. Редактор может добавлять собственные служебные стили, которые отличаются от стилей опубликованной страницы.

• убедитесь, что справа от видео не появилась горизонтальная прокрутка;
• проверьте, нет ли пустого пространства над или под iframe;
• измените ориентацию смартфона и повторите проверку;
• посмотрите, не смещается ли контент после загрузки видео;
• проверьте страницу в браузере без кеша или после очистки кеша плагина.

Типичные ошибки и ограничения

Чаще всего проблема возникает, когда aspect-ratio применён не к обёртке, а к самому iframe, или когда виджет видео содержит дополнительный внутренний элемент с собственной высотой. В такой ситуации проверьте структуру HTML с помощью инструментов разработчика браузера.

Если iframe не является прямым дочерним элементом контейнера, селектор selector iframe обычно всё равно найдёт его на более глубоком уровне. Однако стили Elementor или плагина могут иметь более высокую специфичность. Проверьте, какое правило фактически применяется, и при необходимости уточните селектор.

Не добавляйте одновременно старый hack с padding-bottom и aspect-ratio без необходимости. Оба подхода резервируют высоту, поэтому вместе они могут создать чрезмерный отступ.

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

• не задавайте iframe фиксированную высоту в пикселях;
• не используйте ширину, превышающую ширину контейнера;
• проверьте, не добавляет ли тема собственный min-height;
• после изменений очистите кеш сайта, CDN и браузера;
• для частных или защищённых видео отдельно проверьте права доступа.