Как сделать YouTube‑видео адаптивным в WordPress с помощью FitVids

Проблема

Начиная с WordPress 3.0, достаточно вставить URL видео в редактор, и WordPress сам генерирует код встраивания. Это удобно, но код часто содержит фиксированные атрибуты width и height. В результате видео может оказаться слишком маленьким или слишком большим для области контента. На адаптивной теме такое видео не масштабируется при изменении ширины окна и может «выпасть» за пределы макета.

Чтобы проиллюстрировать, что происходит в исходном состоянии, посмотрите примеры ниже.

Заметьте, что видео не занимает всю ширину контейнера.

Видео не масштабируется и ломает визуальную структуру темы.

Что такое FitVids

FitVids — небольшой скрипт на JavaScript, создающий адаптивную обёртку вокруг встроенных видео и заставляющий их сохранять пропорции при изменении ширины. Коротко: конвертирует iframe/embed в блок с процентной высотой, отвечающий за адаптивность.

Когда использовать FitVids

• У вас гибкая (responsive) тема, и встроенные видео не масштабируются.
• Встраивание идёт через iframe или object.
• Нужен быстрый и надёжный способ сделать видео отзывчивым без обширных изменений CSS.

Установка через плагин (рекомендуемо для непрофтеха)

1. Установите и активируйте плагин FitVids for WordPress.
2. Перейдите в «Внешний вид → FitVids» в админке.
3. Если в теме уже подключён jQuery версии 1.6 или выше, оставьте поле для подключения jQuery пустым. В противном случае отметьте опцию добавления jQuery.

4. В поле «jQuery selector» укажите селектор контейнера, содержащего видео. Для большинства сайтов достаточно ввести body. Если нужно таргетировать конкретный блок, используйте id или класс, например #video-container, #content, .entry-content.

Примечание: символы # и . в начале обозначают id и class в селекторах CSS соответственно.

5. Откройте запись с встраиваемым видео и убедитесь, что видео теперь занимает всю ширину контейнера и корректно масштабируется.

Ручная интеграция в тему (для разработчика)

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

1. Скачайте или скопируйте файл jquery.fitvids.js в папку темы, например в js/.
2. Подключите скрипты в functions.php темы (пример для enqueue).
3. Инициализируйте FitVids для нужного контейнера.

Пример инициализации (используйте одиночные кавычки, чтобы избежать конфликтов):

jQuery(document).ready(function($) {
  // Замените '.entry-content' на ваш контейнер
  $('.entry-content').fitVids();
});

Если ваш сайт использует кастомную разметку, укажите точный селектор вместо .entry-content.

Альтернативный CSS‑подход без FitVids (когда нужно минимальное решение):

.fluid-video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 соотношение */
  height: 0;
  overflow: hidden;
}
.fluid-video-wrapper iframe,
.fluid-video-wrapper embed,
.fluid-video-wrapper object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

В HTML: оберните iframe в блок с классом fluid-video-wrapper.

Частые проблемы и решения

• jQuery версии ниже 1.6: FitVids требует jQuery 1.6+. Обновите jQuery или отметьте опцию плагина для добавления jQuery.
• Неправильный селектор: если вы указали слишком общий селектор, скрипт может обработать лишние элементы. Если слишком узкий — видео останется неадаптивным. Тестируйте с body, затем уточняйте.
• Видео, вставленные через плагин конструктора страниц: некоторые конструкторы используют нестандартные обёртки. Добавьте соответствующий селектор в настройки FitVids.

Important: если ваш сайт использует lazy‑loading плагин, инициализацию FitVids можно выполнять после загрузки видео или при событии, которое срабатывает после вставки iframe.

Когда FitVids не подходит

• Если вы хотите контролировать не только размер, но и поведение плеера (custom controls), может потребоваться более сложная интеграция.
• Если видео вставляются не через iframe/embed, а через специализированные виджеты, требуются кастомные адаптации.

Критерии приёмки

• Видео занимает 100% ширины контейнера контента на ширине просмотра от минимальной до максимальной.
• Пропорции видео сохраняются (нет искажений).
• Нет горизонтальной прокрутки из‑за видео.
• Скрипт не вызывает ошибок в консоли браузера.

Чек‑лист для ролей

Для разработчика:

• Подключить jquery.fitvids.js корректно.
• Указать правильный селектор.
• Проверить совместимость с lazy‑loading и кешированием.

Для контент‑редактора:

• Вставить видео обычным URL или iframe.
• Открыть запись на разных ширинах экрана.
• Сообщить разработчику, если видео выходит за границы.

Короткая методика проверки

1. Вставьте YouTube URL в новую запись.
2. Очистите кеш (если есть).
3. Откройте запись и изменяйте ширину браузера.
4. Убедитесь, что видео масштабируется без разрывов макета.

Заключение

FitVids — простой и надёжный способ сделать встроенные видео адаптивными в WordPress. Для большинства сайтов достаточно плагина и корректной настройки селектора. Если вы разработчик, можно интегрировать скрипт прямо в тему и при необходимости комбинировать с CSS‑обёрткой.

Notes: протестируйте на мобильных устройствах и с включённым lazy‑loading. Если что‑то не работает, проверьте консоль браузера и селекторы.