Сложно себе представить сайт, где полностью отсутствуют ролики с YouTube. Это крупнейший видеохостинг, позволяющий бесплатно загружать свои видео и просматривать видеоконтент других пользователей. Разместить видео с Ютуб в Вордпресс не так просто, как кажется на первый взгляд, особенно в текущих реалиях на территории России.
Проблемы с добавлением видео с YouTube на WordPress сайт напрямую
Сам видеохостинг YouTube предлагает вставить видео на сайт WordPress через iframe. Это считается стандартным способом. Но у такого варианта есть весомый минус — от встроенного фрейма страдает производительность портала.
Добавленные через iframe блоки требуют от пользователя загрузку дополнительных ресурсов сразу при открытии страницы, даже если он не собирается смотреть видео. Несколько фреймов на одной странице существенно снижают скорость рендеринга страницы.
Как добавить адаптивное видео с YouTube без плагина
Не устанавливая дополнительное расширение, встроить ролики на сайт можно 2 основными способами.
Через блок в Gutenberg. В блочном редакторе WordPress предусмотрен «из коробки» блок YouTube. Добавьте его на нужную страницу, укажите ссылку на ролик и нажмите «Вставить». Видео подгрузится и будет добавлено на страницу.
С помощью кода HTML. На странице ролика нажмите «Поделиться» — «Встроить».
Далее появится iframe-код ролика. Скопируйте его.
Добавьте в классическом редакторе через вкладку «Текст» в нужном месте страницы.
В современных версиях WordPress в классическом редакторе вебмастеру достаточно вставить просто URL на конкретный ролик с Ютуб в любой материал. После этого встроенная в WordPress функция обработки видео преобразует ее во фрейм.
Рассмотренные выше способы просты в использовании, но они добавляют на сайт видео через iframe с заданными размерами. Чтобы они хорошо смотрелись на всех экранах, рекомендую прописать адаптивные стили.
.video-youtube {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}Добавив указанные параметры в css-файл темы, оберните сами iframe-коды в элемент <div> с соответствующим классом:
<div class="video-youtube"><iframe width="560" height="315" src="https://www.youtube.com/embed/ID_видео" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>Так вы получите адаптивные видео на сайте, но я не рекомендую использовать этот способ, поскольку не решается проблема с фреймами с точки зрения загрузки дополнительных килобайт данных.
К тому же, в данный момент в России наблюдаются сложности с доступом к ресурсам YouTube. Так как получение информации с площадки замедляют, прямое встраивание видео с Ютуб в WordPress еще сильнее тормозит загрузку веб-страниц для пользователей из России.
Медленные страницы пессимизируются в поисковых системах.
Лучшие плагины для встраивания видеороликов с YouTube на страницы Вордпресс
Для Вордпресс выпущено большое количество плагинов, которые позволяют встраивать видео. Каждый из них обладает своими особенностями. Расскажу про наиболее популярные и лучшие из них.
OmniVideo
Плагин OmniVideo от студии WPShop был выпущен для устранения проблемы с замедлением YouTube в России. У вебмастеров возник запрос на получение решения, которое позволяет встраивать ролики с популярного видеохостинга на страницы сайтов, но при этом избегать связанных проблем.
Взаимодействие с расширением OmniVideo со стороны вебмастера организовано двумя способами: через шорткод или блок Gutenberg. Приведу инструкции, как пользоваться каждым из них.
Через шорткод. В нем вебмастер задает ссылки на видеохостинги, порядок их вывода, заголовок блока, стили и некоторые дополнительные параметры. Все настройки блока представлены в документации плагина, которая полностью на русском языке.
Отдельно отмечу наличие параметра show_partner, которому присваивается значение 1 или 0. При значении 1 под блоком будет показываться партнерская ссылка (закрытая от индексации) на покупку OmniVideo. Если ею воспользуются и приобретут любой продукт на сайте разработчиков из WPShop, вы сможете на этом заработать. Сейчас ВПШоп — это одна из лучших партнерских программ для вебмастеров.
Пример использования шорткода для размещения ролика с YouTube:
[omnivideo title="Название видео" title_tag="H2" style="simple" show_partner="1" youtube="https://youtu.be/1TelHiEIGwI" poster="auto"]Описание видео[/omnivideo]Получится такой блок:
Если не указывается описание видео, то шорткод можно не закрывать.
Через Gutenberg. Среди доступных блоков выбирается вариант OmniVideo.
Далее в его параметрах нужно указать ссылки на видеохостинги и определить другие опции.
Следующим образом выглядит блок, когда в него добавлены ссылки сразу на несколько видеохостингов:
Все настройки, которые не заданы в шорткоде или блоке Gutenberg, будут выставлены по умолчанию. Они указываются в панели управления Вордпресс. Перейдите в «Настройки» — «OmniVideo» и выберите нужные характеристики.
У “ОмниВидео” есть несколько вариантов дизайна блока. Ознакомиться с ними можно на демо-сайте плагина.
Там же в настройках есть очень крутая для вебмастеров функция автоматической замены уже встроенных видео с Ютуб. Активируйте ее, задайте параметры и нажмите «Сохранить». После этого все ролики на сайте, которые встроены с Ютуб стандартным способом, будут переоформлены через блок OmniVideo со всеми его преимуществами: отсутствие загрузки внешних ресурсов при открытии страницы, обложка на сервере сайта, Lazy Load, микроразметка.
Расширение активно развивают, в будущем в нем появятся и другие интересные опции. Например, уже анонсировали, что вскоре можно будет добавлять перед роликом рекламный блок.
OmniVideo является платным расширением. Сейчас его стоимость на 1 домен составляет всего 1900 рублей. В эту цену включены все будущие обновления и 1 год доступа к отзывчивой русскоязычной службе поддержки через систему тикетов, а также подробная документация. По промокоду ниже вы можете еще и существенно сэкономить на покупке лицензии.
Промик на OmniVideo
OmniVideo — единственное решение из данной подборки, которое работает не только с YouTube, но и с популярными российскими видеохостингами.
WP YouTube Lyte
Плагин WP YouTube Lyte был создан с целью оптимизации видео с YouTube на страницах WordPress. Он полностью бесплатный и дает ряд полезных функций:
- До нажатия на «Старт» видео не загружается, а посетителю показывают только обложку.
В настройках есть 2 варианта отображения обложки — локальное кэширование или обращение к ней на сайт i.ytimg.com (один из доменов Google, где хранятся обложки YouTube). По умолчанию выставлен второй вариант, рекомендую его сменить на локальное сохранение обложек.
- 9 размеров плеера, которые можно задать по умолчанию для встроенных роликов.
- Микроразметка.
- Работа по принципу Lazy Load.
- Поддержка плейлистов.
- Возможность вставки отдельно от ролика аудио-дорожки.
- Взаимодействие с YouTube через API.
Добавленный через WP YouTube Lyte блок с роликом смотрится несколько устаревшим, а больших возможностей для настройки дизайна плагин не предлагает.
YouTube Embed
Расширение YouTube Embed подойдет в тех случаях, когда требуется добавить на сайт не одно видео, а целый плейлист. Оно позволяет не только взять уже готовый плейлист на канале Ютуб, но и сформировать свой собственный из роликов с разных каналов.
Взаимодействие с модулем происходит через шорткод непосредственно на странице встраивания, а также через общие настройки в панели управления.
В данном плагине есть несколько интересных опций. Например, можно вывести под роликом ссылку на его скачивание через сервис KeepVid.
Главный минус решения — отсутствие опций по оптимизации. Ролик вставляется через iframe, никаких возможностей для повышения скорости загрузки страниц с видео не предусмотрено.
YouTube WordPress Plugin by Embed Plus
Плагин YouTube WordPress Plugin от компании Embed Plus является одним из самых мощных решений на рынке для встраивания видео. Он позволяет добавлять на нужные страницы Вордпресс ролики, плейлисты, целые каналы, shorts, прямые трансляции и многое другое.
У данного компонента широкие настройки. В том числе, есть оптимизация скорости загрузки, которая здесь называет Facade Mode. Она откладывает загрузку основных ресурсов видеохостинга до нажатия на плеер посетителем.
Расширение YouTube WordPress Plugin подходит для сайтов, которые полностью сконцентрированы на видео. На других проектах я бы не рекомендовал его использовать.
Essential Grid Gallery WordPress Plugin
Расширение Essential Grid создавалось для вывода в формате сетки различного контента на сайте. Его используют на некоторых проектах для создания галерей с видеороликами, но это не специализированная разработка для работы с YouTube, поэтому не следует ожидать от нее оптимизацию iframe.
При помощи Essential Grid создаются макеты для блога, страниц товаров интернет-магазина или посадочные страницы услуг. Далее нужный контент добавляется в соответствующие области. В случае, если речь идет про видео с YouTube, то они вставляются простыми ссылками, преобразуемыми в iframe. Макеты легко кастомизируются при помощи доступных настроек.
Стоимость решения начинается с $40.
YouTube Video Gallery
Для создания сайтов с видеоконтентом можно использовать YouTube Video Gallery. Плагин дает возможность не просто выводить ролики на сайте, но также группировать их, каталогизировать и добавлять теги.
В YouTube Video Gallery предусмотрено несколько вариантов шорткодов для вывода роликов. Присутствует настройка дизайна их отображения, а также несколько уже готовых шаблонов. Вставлять галереи роликов можно не только в основной контент (статьи, страницы, товары WooCommerce и т.д.), но и в виджеты.
Чтобы полноценно пользоваться расширением, нужно будет заплатить $99,99.
Выше далеко не полный список функций, которые в плагине предоставляются только в Pro-версии.
YouTube Embed, Playlist and Popup
Расширение YouTube Embed, Playlist and Popup от команды WpDevArt очень простое в использовании. После его установки в Classic Editor WordPress появляется кнопка, нажав на которую настраиваются параметры вывода видео, и готовый шорткод вставляется в запись, страницу или любое другое место на сайте.
Ключевая функция этого решения — всплывающие окна с видео. Но она обойдется покупателям в $12 за 1 сайт, поскольку доступна только в Pro-версии расширения.
Также только в Pro-варианте можно выбирать для конкретных видео размеры плеера, дизайн, показывать или нет описания и другие важные параметры. В бесплатной версии имеются только глобальные настройки для всех роликов, которые вставлены через шорткод плагина.
У данного плагина достаточно низкие оценки в репозитории WordPress из-за слабой поддержки и проблем с адаптивностью.
Когда YouTube начали замедлять в России, вставлять на него ссылки напрямую через iframe стало опасно из-за риска ухудшить поведенческие факторы на сайте. Я рекомендую любые видео сейчас добавлять на сайт с отложенной загрузкой и выгрузкой обложки к себе на хостинг. Лучший плагин для этого — OmniVideo, который не только исключает торможение ресурса из-за видеороликов при загрузке страниц, но и может предложить посетителям вашего сайта множество вариантов видеохостингов, где они смогут посмотреть ролик.
Скидка на OmniVideo
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
