Vimeo представляет собой платформу, которая ориентирована на профессионалов и бизнес-сегмент в области видеопродукции. Несмотря на то, что ее аудитория значительно меньше, чем у YouTube, это объясняется, прежде всего, различиями в позиционировании обеих платформ.
В данной статье я расскажу о том, как встроить видео с Vimeo на сайт WordPress, чтобы зрители могли его просматривать непосредственно на страницах, не переходя на видеохостинг.
Существует два основных способа добавить видео с Vimeo на WordPress: с помощью плагина и вручную. Если вы хотите простое и быстрое решение, рекомендуется использовать плагины, такие как Vimeotheque или WP Vimeo Lightbox, которые позволяют легко интегрировать видео, а также предлагают дополнительные функции, такие как настройка отображения и адаптивность.
Для ручного встраивания видео, вам нужно просто скопировать ссылку на видео с Vimeo и вставить ее в редактор WordPress. Например, вставив URL-адрес видео на отдельной строке, вы автоматически получите встроенный плеер. Также можно использовать специальный HTML-код для более детальной настройки отображения видео.
Не забудьте проверить настройки конфиденциальности на Vimeo, чтобы ваши видео отображались правильно. Убедитесь, что в настройках видео разрешено его встраивание на сторонние сайты.
В заключение, независимо от выбранного вами способа, добавление видео с Vimeo значительно обогатит ваш контент и привлечет больше посетителей на ваш сайт, создавая более интерактивную и привлекательную среду для пользователей.
Что такое Vimeo?
При разработке Vimeo внимание было уделено творческой аудитории: режиссерам, аниматорам, художникам, музыкантам и другим представителям, для которых важно загружать свои видео в высоком качестве.
С развитием платформы ее пользователями стали также различные компании, учебные заведения и креативные агентства.
Преимущества Vimeo в сравнении с YouTube:
- Нет рекламы. Это касается как самих видео на платформе, так и встраиваемых роликов на других сайтах.
- Высокое качество видео. В Vimeo можно загружать контент с разрешением до 8K без потери четкости.
- Разнообразие настроек конфиденциальности для контента, включая возможность защищать просмотр паролем.
- Монетизация для профессионалов. У пользователей есть возможность продавать загруженное видео.
- Брендирование. Полная кастомизация плеера, включая выбор цветов и добавление логотипа.
Согласно статистике, ежемесячное количество пользователей Vimeo превышает 250 миллионов. Более 6000 крупных компаний активно используют эту платформу для размещения своего контента, а число платных подписчиков составляет более 7 миллионов.
Как вставить видео Vimeo на WordPress-сайт без плагина
Встраивание видео без дополнительных плагинов возможно с помощью iframe. Рассмотрим несколько основных методов, как это можно сделать.
Существует два способа копирования кода
Чтобы интегрировать видео на сайт WordPress, можно использовать как прямую ссылку, так и iframe-код, предоставленный платформой.
Прямая ссылка подразумевает линк на видеоролик, который можно просто скопировать из адресной строки браузера.
Код iframe можно получить, нажав на кнопку «Share» («Поделиться») под видеороликом.
В появившемся окне выберите «Embed» и нажмите «Copy embed code». После этого код будет скопирован в буфер обмена.
Стоит учесть, что не все видео на Vimeo разрешено встраивать на сторонние сайты. Для некоторых роликов может отсутствовать кнопка «Share», и при попытке использовать их ссылку могут возникать ошибки из-за настроек конфиденциальности.
Получив код видеоролика одним из предложенных способов, следует просто вставить его на нужной странице сайта через Classic Editor или Gutenberg.
В классическом редакторе WordPress
Прямая ссылка должна быть вставлена через вкладку «Визуально». WordPress автоматически преобразует ссылку на видео в плеер.
Код iframe вставляется через вкладку «Текст».
При желании можно указать размеры плеера прямо в iframe с помощью параметров width и height. Однако не забудьте внести изменения в стили, которые применены в обертывающем фрейм коде div.
Использование блочного редактора Gutenberg
Для вставки прямой ссылки на видео из Vimeo в редакторе Gutenberg, кликните на кнопку «+» в нужном месте и выберите блок Vimeo. Затем просто вставьте ссылку, и она автоматически преобразуется в видеоролик.
Если вы применяете блоки «Абзац», «Классический» или «Вставка URL», итог будет также идентичен.
Для вставки кода iframe в Gutenberg выберите блок «Произвольный HTML» и добавьте свой код туда.
Хотя визуально этот код не будет преобразован в плеер в редакторе, на итоговой странице он корректно отобразится.
Применение шорткода для настройки размеров
WordPress предоставляет несколько полезных шорткодов по умолчанию, одним из которых является embed для интеграции внешнего контента. Этот шорткод можно использовать для добавления видео с Vimeo. Основное преимущество данного метода — возможность задать нужные размеры плеера.
Шорткод можно указать в любом месте поста или страницы, например:
ссылкаВ данном случае параметр width обозначает ширину плеера, а height — его высоту.
Этот шорткод поддерживается как в классическом редакторе WordPress, так и в Gutenberg (нужно использовать блок «Шорткод» или «Классический»).
Лучшие плагины для встраивания роликов Вимео на страницы WordPress
Способы, упомянутые выше, позволяют интегрировать контент с Vimeo на сайт, но они имеют один значительный недостаток: видео вставляется через iframe, что значительно замедляет загрузку страницы.
Для решения этой проблемы существуют плагины, которые оптимизируют процесс добавления видео на ресурсы WordPress. Рассмотрим лучшие из них.
OmniVideo
OmniVideo — это плагин, разработанный для оптимального добавления видео на сайт с учетом производительности и SEO.
Он поддерживает многочисленные популярные видеохостинги, как зарубежные, так и отечественные:
- YouTube;
- Vimeo;
- RuTube;
- ВК Видео;
- Дзен Видео;
- Mail.ru Видео;
- Kinescope.
Кроме этого, плагин позволяет встраивать видео в формате mp4, загруженные на хостинг, в специализированный плеер.
На сайте есть отдельная статья, описывающая процесс вставки видео с YouTube в WordPress с использованием OmniVideo.
Теперь рассмотрим, как использовать этот плагин для работы с видео от Vimeo. В зависимости от того, какой редактор вы используете (классический или Gutenberg), способы вставки будут немного различаться.
Классический редактор WordPress.
Чтобы добавить ролики с Vimeo на сайт с помощью OmniVideo, используйте следующий шорткод:
[omnivideo poster='auto' title='название' vimeo='ссылка'/]Структура шорткода подразумевает следующее:
- В атрибут vimeo вставляется ссылка на конкретный ролик (копируется прямо из адресной строки браузера);
- В title указывается название (опционально);
- Атрибут poster автоматически загружает обложку, которую использует для видео. Заменив auto на ссылку изображения, сайт может задать свою обложку.
Это базовый шорткод, который выводит плеер, определенный в настройках плагина. Имеются опции кастомизации, подробно описанные в документации к расширению. Изменяя несколько атрибутов, можно легко менять стиль плеера.
В блочном редакторе Gutenberg также можно использовать шорткод, как описано выше, но имеется и специальный блок “OmniVideo”.
Выбрав этот блок, необходимо заполнить параметры. Укажите ссылку на видеоролик на Vimeo и настройте другие опции из выпадающих списков.
Работать с OmniVideo достаточно просто. Используя данный плагин, вы сможете быстрее вставить видео с Vimeo по сравнению с перечисленными ранее методами. Но скорость добавления видео — не единственное преимущество.
Преимущества использования OmniVideo:
Можно разместить ролики с различных платформ в одном блоке, что дает пользователям выбор и исключает возможность проблем с просмотром видео из-за ограничений по регионам.
Видеоматериалы, встроенные таким образом, не замедляют загрузку страниц. Ресурсы, необходимые для воспроизведения видео, загружаются только после нажатия кнопки «Play». Кроме этого, обложка заранее загружается на сервер сайта, что исключает обращения к сторонним ресурсам. Также реализован Lazy Load для всего компонента.
Блок с видео имеет адаптивный дизайн, корректно отображается и функционирует на любом устройстве. Также есть возможность стилизовать плеер, выбирая из множества доступных параметров.
Поддерживается микроразметка VideoObject, что является еще одним преимуществом для сайта с точки зрения SEO.