Vimeo является площадкой, которая ориентирована на бизнес-среду и профессионалов в сфере видеосъемки. Она существенно уступает по аудитории YouTube. Но связано это, в первую очередь, с разным позиционированием платформ.
В этой статье расскажу, как вставить видео с Vimeo в WordPress, чтобы ролик отображался прямо на сайте, без перехода на сам видеохостинг.
Что такое Vimeo?
Сами разработчики Вимео при создании ресурса ориентировались на творческих людей: режиссеров, создателей анимации, художников, музыкальных исполнителей и прочих, кому важно залить в сеть свои видео в высоком качестве.
С развитием функционала платформы, ее пользователями также стали различные бизнесы, образовательные учреждения и креативные агентства.
Согласно данным аналитиков, ежемесячная аудитория Vimeo составляет свыше 250 миллионов пользователей. Более 6000 крупных компаний активно используют платформу для публикации своего контента, а число платных подписчиков сервиса превышает 7 миллионов.
Как вставить видео Vimeo на WordPress-сайт без плагина
Встраивание плеера без установки дополнительных плагинов возможно через iframe. Рассмотрим основные способы, как это сделать.
Два типа копирования кода
Чтобы вставить видео на сайт ВП, можно использовать прямую ссылку или iframe-код, который предоставляет сама платформа.
Прямая ссылка. Под ней понимается линк на видеоролик, просто скопированный из адресной строки в браузере.
Код iframe. Чтобы его получить, нужно под роликом нажать на значок Share («Поделиться»).
Во всплывающем окне перейдите к пункту «Embed» и кликните «Copy embed code». После этих действий код окажется в буфере обмена.
Не все ролики сервиса Вимео разрешены к встраиванию на сторонних сайтах. У некоторых может отсутствовать кнопка “Share”, а при попытке использовать их линк для вставки на сайт будут возникать ошибки из-за настроек конфиденциальности.
Заполучив первым или вторым способом код ролика, остается добавить его в нужное место на сайте через Classic Editor или Gutenberg.
В классическом редакторе WP
Прямая ссылка. Ее необходимо вставлять через вкладку «Визуально». В WordPress встроен автоматический обработчик роликов с Вимео, который на лету преобразует ссылку в видеоплеер.
Код iframe. Он добавляется через вкладку «Текст».
При желании прямо в iframe можно указать размеры плеера с помощью переменных width и height. Но не забудьте в таком случае скорректировать стили, которые прописаны в использованном для обертывании фрейма коде div.
В блочном редакторе Gutenberg
Прямая ссылка. Чтобы вставить прямую ссылку из сервиса Вимео через Gutenberg, необходимо нажать в блочном редакторе на «+» в нужном месте и найти блок Vimeo. Далее в появившееся поле остается добавить линк, который преобразуется в ролик.
Если использовать блоки «Абзац», «Классический» или «Вставка URL», то будет ровно такой же эффект.
Код iframe. Для его встраивании через Гутенберг выберите блок «Произвольный HTML». Добавьте туда свой код.
Визуально данный код в редакторе преобразован в плеер не будет. Но на самой странице он обработается.
Использование шорткода для изменения размеров
По умолчанию движок WordPress поддерживает несколько полезных шорткодов. Среди них — embed для встраивания различного внешнего контента. Его можно использовать для добавления на сайт роликов с Vimeo. Преимущество данного метода — возможность задать нужные размеры.
В любом месте в посте или на странице укажите шорткод со своим роликом, например:
[embed width="500" height="300"]ссылка[/embed]Здесь в параметре width передается ширина плеера, а в параметре height его высота.
Данный шорткод обрабатывается, как классическим редактором WordPress, так и Гутенбергом (используйте блок «Шорткод» или «Классический»).
Лучшие плагины для встраивания роликов Вимео на страницы WordPress
Перечисленные выше способы позволяют добавить контент с Vimeo на сайт, но у них есть один существенный минус. Они интегрируют видео через iframe, который сильно тормозит загрузку страницы.
Избавиться от этой проблемы помогают плагины, оптимизирующие процесс внедрения роликов на WP-ресурс. Рассмотрю лучшие из них.
OmniVideo
Плагин OmniVideo создан для оптимального с точки зрения производительности и SEO добавления роликов на сайт.
Он поддерживает популярные зарубежные и российские видеохостинги:
- YouTube;
- Vimeo;
- RuTube;
- ВК Видео;
- Дзен Видео;
- Mail.ru Видео;
- Kinescope.
Помимо контента с перечисленных площадок, расширение позволяет встраивать в специальный плеер и видео в формате mp4, загруженные на хостинг.
В отдельном материале на сайте можно посмотреть, как вставить видео с YouTube в WordPress через OmniVideo.
Здесь приведу инструкцию по использованию расширения для работы с роликами Вимео. В зависимости от используемого редактора (классический или Gutenberg) способы встраивания будут немного отличаться.
Классический редактор WordPress.
Для добавления роликов с Vimeo на сайт с помощью OmniVideo используется шорткод. Он выглядит следующим образом:
[omnivideo poster='auto' title='название' vimeo='ссылка'/]По структуре шорткода понятно, что:
- В атрибут vimeo добавляется ссылка на сам ролик (берется прямо из браузерной строки)
- В title вставляется название (опционально).
- Атрибут poster выгружает автоматически обложку и использует ее для блока с видео. Заменив auto ссылкой на изображение, вебмастер может установить свою обложку.
Это базовый шорткод, который выводит заданный в настройках расширения плеер. Есть опции для его кастомизации, которые подробно описаны в документации расширения. Управляя несколькими атрибутами, легко можно изменить стиль плеера.
Gutenberg.
В блочном редакторе Гутенберг можно использовать шорткод, как это описано выше, но также предусмотрен и специальный компонент “OmniVideo”.
Выбрав его, остается заполнить параметры. Укажите адрес на видеоролик Vimeo и задайте другие опции из выпадающих списков.
Работать с OmniVideo достаточно просто. Вставить ролик с Вимео при помощи плагина удается быстрее, чем рассмотренными в первой части статьи способами. Но скорость добавления видео — это далеко не единственный плюс.
OmniVideo полностью закрывает вопрос оптимального добавления роликов на сайт Вордпресс с любого популярного видеохостинга. Он улучшит блог, портфолио, магазин или другой тип ресурса. Не потребуется устанавливать несколько отдельных расширений под каждую платформу.
OmniVideo со скидкой
Video Uploads for Vimeo
Расширение Video Uploads for Vimeo создано для плотной интеграции WordPress с популярной платформой. Его часто используют на корпоративных образовательных ресурсах, где Вимео выступает основным хостингом размещения записей видео и проведения прямых трансляций.
После установки Video Uploads for Vimeo потребуется ввести API-ключ для работы с расширением. Без него плагин не работает.
Модуль позволяет взаимодействовать с видеоплощадкой сайту на Вордпресс и в обратном направлении. После его активации в разделе «Медиафайлы» появится отдельный пункт “Vimeo”. Отсюда можно загружать на платформу ролики, а далее с легкостью интегрировать их в материалы на сайте.
В бесплатной версии разработка имеет существенные ограничения. Платная версия позволяет детально настраивать загружаемые ролики, в том числе, их приватность, предустановки встраивания, распределение по папкам и многое другое.
Основная причина заплатить за Video Uploads for Vimeo — возможность использовать расширение в связке с другими плагинами: Advanced Custom Fields, WooCommerce, WPForms, BuddyPress и пр. Также в Pro-версии добавляется блок Gutenberg.
Стоимость Video Uploads for Vimeo составляет $59,99 за 1 домен. Но перед покупкой убедитесь, что инструмент совместим с вашей версией WordPress, поскольку в последнее время он редко получает обновления.
Vimeotheque
Vimeotheque позволяет создать видеогалерею с материалами Vimeo на вашем сайте. Из его интересных особенностей:
- Адаптивный плеер на HTML5.
- Отсутствие конфликта при встраивании нескольких материалов Вимео на одну страницу WP.
- Формирование отдельных постов на базе видео.
- Распределение роликов в дашборде по категориям, тегам.
- Виджет последних добавленных видеоматериалов.
- Создание галерей и плейлистов.
- Массовый импорт контента.
Многие из функций заблокированы в бесплатной версии, поэтому потребуется купить Pro-подписку. Ее стоимость — $49,99 за 1 год.
Итоги
Встраивание видео с Vimeo напрямую ведет к замедлению скорости работы сайта. Я предпочитаю на своих проектах использовать OmniVideo. Это максимально простое и удобное решение, которое работает с разными видеоплатформами и устраняет все негативные последствия добавления роликов через iframe.
Скидка на OmniVideo
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
