Как добавить видео с YouTube на WordPress: плагином и вручную

Ютуб в Вордпресс

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

С какими проблемами сталкиваются владельцы сайтов на Вордпресс при публикации видео с Ютуб

Даже когда видеохостинг стабильно работал в нашей стране, при вставке роликов с YouTube на страницы сайтов WP возникало немало проблем:

Ухудшение производительности. Если пользоваться способом, рекомендованным самим сервисом, то можно столкнуться с явным замедлением загрузки страниц. Это связано с тем, что при таком методе все необходимые для воспроизведения видео ресурсы подгружаются сразу. Особенно сильно тормозит загрузка в том случае, когда на страницу помещают сразу несколько тегов iframe с видеороликами.

Плохая адаптивность. При стандартной вставке виде не подстраивается под различные варианты экранов. В результате многие пользователи сразу покидают страницу, не дождавшись полной загрузки. Это увеличивает процент отказов и плохо влияет на SEO сайта.

Отсутствие микроразметки. Чтобы улучшить видимость видеороликов в выдаче поисковых систем, вебмастеры размещают специальную микроразметку. Объект VideoObject позволяет добавлять информацию о ролике в HTML-код. При вставке с видео Ютуб обычным методом через iframe админы сайтов забывают о микроразметке, что ухудшает SEO.

Недавно владельцы ресурсов ВордПресс столкнулись с новой проблемой. Теперь YouTube ролики вообще не работают на территории РФ. Ниже в статье подскажу лайфхак, как выйти из этой ситуации.

Как вставить адаптивный ролик Ютуб в WordPress без использования плагина

Этот метод самый простой. Однако он же — самый неудачный, поскольку приводит ко всем указанным выше проблемам. А если основной костяк аудитории сайта — российские пользователи, то он вовсе противопоказан. Добавить видео с Ютуб на страницу сайта Вордпресс без применения плагина можно с помощью вставки HTML-кода или через специальный блок Gutenberg.

Вставляем ролик YouTube на WordPress с помощью специального блока Гутенбенг

  1. Выберите режим редактирования страницы Вордпресс с помощью блочного редактора.
  2. Установите курсор внутри текста поста в том месте, где нужно показывать ролик.
  3. Найдите в списке специальный блок для вставки Ютуб и нажмите на соответствующую иконку.

Блок Gutenberg Youtube

  1. Введите url источника видео.

Встраиваем YouTube видео с помощью HTML-кода

  1. Сначала потребуется получить код видео на сервисе YouTube. Под роликом вы найдете кнопку «Поделиться».

Вставка видео

  1. После нажатия на эту кнопку появится окно, в котором нужно кликнуть на пункт «Встроить».

Код ролика Youtube

  1. Вы получите код, заключенный в теги iframe. Скопируйте его в буфер обмена или в блокнот.

Iframe для вставки

  1. На сайте Вордпресс вы можете воспользоваться либо вкладкой «Текст» в классическом редакторе (Classic Editor), либо блоком в Gutenberg для добавления HTML-кода.
  2. В подходящее место вставьте скопированный с Ютуб тег iframe вместе с содержимым, после чего сохраните страницу.

Добавляем CSS для адаптивности

При использовании ручного метода вставки ролик получается неадаптивным. Исправить это можно с помощью следующего CSS-кода:

.youtube-box {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
}

.youtube-box iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

Чтобы стили применились, вам потребуется обернуть iframe ролика в тег div с классом youtube-box.

Как встроить ролик YouTube в Вордпресс с помощью плагина

Для WordPress существует несколько плагинов для встраивания видео с Ютуб на сайт. Расскажу про лучшие из них и актуальные на данный момент.

OmniVideo: лучшее решение для вставки видеороликов на сайты WordPress


Плагин Omnivideo

OmniVideo — это новый плагин от команды WPShop, разработчика многих популярных решений для Вордпресс. Модуль предоставляет удобный блок для вставки роликов с различных видеохостингов. Кроме Ютуб он поддерживает такие платформы, как VK, OK, Vimeo, RuTube и др.

Использование плагина дает следующие преимущества:
Отложенная загрузка (технология lazy load). Ресурсы ролика загружаются не в момент перехода на страницу, а после прокрутки ее до блока с видео. В результате показатель быстродействия сайта на базе Вордпресс не страдает.
Адаптивный блок. Бокс с видеороликами подстраивается под размер любого экрана. Он одинаково хорошо отображается как на десктопе, так и на мобильных устройствах.
Доступно много вкладок с разными видеохостингами. Пользователь сможет выбрать, на какой платформе он хочет посмотреть ролик.
Маскировка прямых ссылок. Расширение скрывает прямые линки на видеоролики, что положительно влияет на SEO параметры Вордпресс ресурса.
Микроразметка VideoObject. Плагин имеет правильную разметку, чтобы поисковики могли получать всю необходимую информацию о видеоконтенте на сайте.
Кастомная обложка видео. Если не устраивает обложка, которую предоставляет хостинг, вы можете добавить свой вариант из медиатеки WordPress.
Массовая автозамена тега ifame шорткодом самого плагина. Если на сайте уже есть много видео с YouTube, вам не придется обходить вручную все страницы и менять код на блок плагина. В настройках содержится специальная опция, с помощью которой вы сможете одним движением мышки заменить все теги iframe шорткодами плагина OmniVideo.

Вставить ролик внутрь поста на ВордПресс можно с помощью шорткода или через блок Гутенберг.

Инструкция, как добавить видео Youtube с помощью шорткода:

  1. Скопируйте в буфер ссылку на ролик в сервисе YouTube.
  2. В нужном месте статьи на сайте Вордпресс вставьте шорткод с указанием вашей ссылки. Пример:
[omnivideo title="Название" youtube="https://youtu.be/8YelOiEbGwI" poster="auto"]
  1. Внутрь шорткода поместите описание видео. Этот пункт выполнять не обязательно. Пример:
[omnivideo title="Название" youtube="https://youtu.be/8YelOiEbGwI" poster="auto"]Подробное описание[/omnivideo]
  1. Добавьте параметр show_partner со значением 1, чтобы вывести свою партнерскую ссылку. Посетители будут переходить по ней и покупать продукты WPShop, за что вы получите вознаграждение. Пример:
[omnivideo title="Название" show_partner="1" youtube="https://youtu.be/8YelOiEbGwI" poster="auto"]

Инструкция, как пользоваться блоком Гутенберг для вставки видеоролика с Ютуб:

  1. В блочном редакторе Вордпресс найдите блок «OmniVideo».

Блок гутенберг omnivideo

  1. В параметрах блока найдите поле для вставки ссылки на YouTube ролик. Вы также можете добавить линки на другие видеохостинги и выбрать вариант, который будет отображаться на главной вкладке.

Вставка ссылки на видео

  1. Здесь же вы можете настроить другие опции или оставить все по умолчанию. Если поменяете дефолтные значения, они применятся только для этого блока. В ином случае подтянутся параметры из общих настроек плагина. Это такие функции, как стиль блока, иконки и заголовки сервисов, маскировка ссылок. Здесь же можно включить отображение партнерской ссылки для дополнительного заработка.

Параметры блока с видео

  1. Заполните поле «Описание видео» и сохраните блок.

Описание ролика

Подробнее о работе блока Gutenberg в Omnivideo

Теперь лайфхак, как при помощи нового плагина OmniVideo решить проблему с неработающими роликами YouTube на Вордпресс. Для российских пользователей добавьте альтернативные источники видео и сделайте вкладку YouTube одной из последних. В этом случае все, кто заходит на сайт из России, смогут посмотреть видеоролик с VK Video или RuTube, а остальные — привычным способом через YouTube.

Промокод на лицензию OmniVideo

WP YouTube Lyte: отложенная загрузка для видео YouTube

Youtube Lyte для ВП

WP YouTube Lyte — небольшой удобный плагин для Вордпресс, который добавляет функцию отложенной загрузки к плееру YouTube. Это позволяет сократить время загрузки страницы.

Модуль также встраивает микроразметку VideoObject и делает видеоролики адаптивными.

YouTube Embed: добавление отдельных роликов и плейлистов

Youtube Embed для роликов и плейлистов

С помощью Вордпресс модуля YouTube Embed можно добавлять стандартные видео или целые коллекции.

Вставка видеоролика или плейлиста производится с помощью настраиваемых шорткодов.

YouTube WordPress Plugin by Embed Plus: отдельные ролики, плейлисты и «ленивая» загрузка

Модуль YouTube WordPress Plugin by Embed Plus

Плагин YouTube WordPress Plugin by Embed Plus предоставляет функцию lazy load для улучшения производительности сайта на базе CMS Вордпресс.

Он также позволяет выводить как одиночные видеоролики, так и целые плейлисты. Для вставки видео на Вордпресс предусмотрен специальный блок Гутенберг.

Расширение для галерей

Плагин Essential Grid Gallery предоставляет интеграцию Вордпресс с различными иностранными платформами видео, аудио и изображений, такими как YouTube, Vimeo, Flickr и др.

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

Плагин совместим с конструктором Elementor и популярным модулем для создания интернет-магазинов WooCommerce.

Галерея роликов

YouTube Video Gallery предоставляет два удобных формата для вывода на Вордпресс видеороликов с вашего канала: в виде сетки или в виде галереи.

Оба варианта вставляются на страницы сайта с помощью настраиваемых шорткодов.

YouTube Embed, Playlist and Popup: всплывающее окно для роликов

Всплывающее окно YouTube на WP

Плагин YouTube Embed, Playlist and Popup позволяет встраивать адаптивные видеоролики или плейлисты в посты блога на основе Вордпресс с помощью шорткодов.

Для активации функции всплывающего окна потребуется приобрести Pro-версию, что сейчас для российских пользователей может быть проблематичным.

Разных плагинов для вставки видео с Ютуб много. Но только премиальный OmniVideo предлагает решение для пользователей, у которых видеохостинг не работает. Поэтому для своих сайтов Вордпресс я выбираю именно это расширение.

Скидка на OmniVideo

Пожалуйста, оцените материал:

Специализируюсь на разработке и оптимизации уникальных веб-решений для клиентов различных отраслей. Имею большой опыт работы с WordPress, которым активно делюсь с читателями.
Получай полезные материалы удобным способом!
Добавить комментарий