Как создать адаптивный блок с видео в WordPress с помощью OmniVideo

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

Почему важно использовать адаптивное видео в WordPress

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

Плагин OmniVideo идеально подходит для этих целей, так как поддерживает множество источников видео (YouTube, Vimeo, собственные файлы), а также предоставляет удобные настройки для управления внешним видом и поведением видеоплеера.

Установка и базовая настройка плагина OmniVideo

Для начала установим плагин:

1. В админке WordPress перейдите в Плагины > Добавить новый.
2. В поле поиска введите "OmniVideo".
3. Найдите плагин от WPShop и нажмите Установить, затем Активировать.

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

Создание видеоблока через OmniVideo

Для добавления видео на страницу:

1. Перейдите в OmniVideo > Добавить новое видео.
2. Вставьте ссылку на видео с YouTube или Vimeo, либо загрузите файл.
3. Настройте параметры: автозапуск, отображение контроля, режим показа и адаптивность.
4. Сохраните видео и скопируйте шорткод.
5. Вставьте шорткод в нужное место контента или шаблона.

Кастомизация адаптивного видеоблока с помощью кода

Для более гибкой настройки вы можете использовать фильтры и хуки OmniVideo, а также добавить собственный CSS и JavaScript.

Добавление собственного класса и обертки

Допустим, требуется добавить кастомный класс к контейнеру видео для стилизации. Для этого воспользуемся хуком wpdo_omnivideo_embed_container_class:

function wpdo_add_custom_class_to_omnivideo($classes) {
    $classes[] = 'wpdo-custom-video-wrapper';
    return $classes;
}
add_filter('wpdo_omnivideo_embed_container_class', 'wpdo_add_custom_class_to_omnivideo');

Этот код добавит класс wpdo-custom-video-wrapper к блоку с видео. Далее в CSS можно прописать правила:

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

Такой подход обеспечивает сохранение соотношения сторон и адаптивность видео.

Использование шорткода с параметрами для адаптивности

Плагин OmniVideo поддерживает параметры в шорткодах. Например:

[omnivideo url="https://www.youtube.com/watch?v=example" width="100%" height="auto" responsive="true"]

Параметр responsive="true" активирует встроенную адаптивность, а ширина и высота задают масштабирование.

Расширенные приемы: Lazy Load и оптимизация загрузки видео

Чтобы ускорить загрузку страницы и снизить нагрузку на сервер, стоит использовать ленивую загрузку видео. OmniVideo поддерживает эту функцию — включите ее в настройках плагина или добавьте вручную.

Пример кода для ленивой загрузки с помощью JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  const videos = document.querySelectorAll('.wpdo-custom-video-wrapper iframe[data-src]');
  const lazyLoad = function() {
    videos.forEach(video => {
      if(video.getBoundingClientRect().top < window.innerHeight) {
        video.src = video.getAttribute('data-src');
        video.removeAttribute('data-src');
      }
    });
  };
  window.addEventListener('scroll', lazyLoad);
  lazyLoad();
});

Для этого нужно в шорткоде вставлять видео с атрибутом data-src вместо src, чтобы загрузка происходила только при прокрутке к видео.

Заключение по адаптивному видео в WordPress с OmniVideo

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

Для скачивания и подробной информации посетите страницу плагина на WPSHOP.ru.