Як зробити адаптивне відео в 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, але не вирішує проблеми самого відео: блокування від third-party cookies, обмеження доступу, повільне завантаження або банер згоди на використання cookies потребують окремого налаштування.

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