Как добавить видео с YouTube на WordPress: плагином и вручную
После того как YouTube сначала замедлил воспроизведение роликов для пользователей из России, а потом и вовсе перестал работать, владельцы сайтов стали срочно искать новые способы публикации видео на своих ресурсах. В статье поделюсь соображениями о том, как в новых реалиях вставлять ролики с YouTube в Вордпресс.
- С какими проблемами сталкиваются владельцы сайтов на Вордпресс при публикации видео с Ютуб
- Как вставить адаптивный ролик Ютуб в WordPress без использования плагина
- Вставляем ролик YouTube на WordPress с помощью специального блока Гутенбенг
- Встраиваем YouTube видео с помощью HTML-кода
- Добавляем CSS для адаптивности
- Как встроить ролик YouTube в Вордпресс с помощью плагина
- OmniVideo: лучшее решение для вставки видеороликов на сайты WordPress
- WP YouTube Lyte: отложенная загрузка для видео YouTube
- YouTube Embed: добавление отдельных роликов и плейлистов
- YouTube WordPress Plugin by Embed Plus: отдельные ролики, плейлисты и «ленивая» загрузка
- Essential Grid Gallery WordPress Plugin: премиум-решение для вставки картинок, видео и аудио из разных источников
- YouTube Video Gallery: сетки и галереи для роликов Ютуб
- YouTube Embed, Playlist and Popup: всплывающее окно для роликов
С какими проблемами сталкиваются владельцы сайтов на Вордпресс при публикации видео с Ютуб
Даже когда видеохостинг стабильно работал в нашей стране, при вставке роликов с YouTube на страницы сайтов WP возникало немало проблем:
Ухудшение производительности. Если пользоваться способом, рекомендованным самим сервисом, то можно столкнуться с явным замедлением загрузки страниц. Это связано с тем, что при таком методе все необходимые для воспроизведения видео ресурсы подгружаются сразу. Особенно сильно тормозит загрузка в том случае, когда на страницу помещают сразу несколько тегов iframe с видеороликами.
Плохая адаптивность. При стандартной вставке виде не подстраивается под различные варианты экранов. В результате многие пользователи сразу покидают страницу, не дождавшись полной загрузки. Это увеличивает процент отказов и плохо влияет на SEO сайта.
Отсутствие микроразметки. Чтобы улучшить видимость видеороликов в выдаче поисковых систем, вебмастеры размещают специальную микроразметку. Объект VideoObject позволяет добавлять информацию о ролике в HTML-код. При вставке с видео Ютуб обычным методом через iframe админы сайтов забывают о микроразметке, что ухудшает SEO.
Недавно владельцы ресурсов ВордПресс столкнулись с новой проблемой. Теперь YouTube ролики вообще не работают на территории РФ. Ниже в статье подскажу лайфхак, как выйти из этой ситуации.
Как вставить адаптивный ролик Ютуб в WordPress без использования плагина
Этот метод самый простой. Однако он же — самый неудачный, поскольку приводит ко всем указанным выше проблемам. А если основной костяк аудитории сайта — российские пользователи, то он вовсе противопоказан. Добавить видео с Ютуб на страницу сайта Вордпресс без применения плагина можно с помощью вставки HTML-кода или через специальный блок Gutenberg.
Вставляем ролик YouTube на WordPress с помощью специального блока Гутенбенг
- Выберите режим редактирования страницы Вордпресс с помощью блочного редактора.
- Установите курсор внутри текста поста в том месте, где нужно показывать ролик.
- Найдите в списке специальный блок для вставки Ютуб и нажмите на соответствующую иконку.
- Введите url источника видео.
Встраиваем YouTube видео с помощью HTML-кода
- Сначала потребуется получить код видео на сервисе YouTube. Под роликом вы найдете кнопку «Поделиться».
- После нажатия на эту кнопку появится окно, в котором нужно кликнуть на пункт «Встроить».
- Вы получите код, заключенный в теги iframe. Скопируйте его в буфер обмена или в блокнот.
- На сайте Вордпресс вы можете воспользоваться либо вкладкой «Текст» в классическом редакторе (Classic Editor), либо блоком в Gutenberg для добавления HTML-кода.
- В подходящее место вставьте скопированный с Ютуб тег 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 — это новый плагин от команды WPShop, разработчика многих популярных решений для Вордпресс. Модуль предоставляет удобный блок для вставки роликов с различных видеохостингов. Кроме Ютуб он поддерживает такие платформы, как VK, OK, Vimeo, RuTube и др.
Вставить ролик внутрь поста на ВордПресс можно с помощью шорткода или через блок Гутенберг.
Инструкция, как добавить видео Youtube с помощью шорткода:
- Скопируйте в буфер ссылку на ролик в сервисе YouTube.
- В нужном месте статьи на сайте Вордпресс вставьте шорткод с указанием вашей ссылки. Пример:
[omnivideo title="Название" youtube="https://youtu.be/8YelOiEbGwI" poster="auto"]
- Внутрь шорткода поместите описание видео. Этот пункт выполнять не обязательно. Пример:
[omnivideo title="Название" youtube="https://youtu.be/8YelOiEbGwI" poster="auto"]Подробное описание[/omnivideo]
- Добавьте параметр show_partner со значением 1, чтобы вывести свою партнерскую ссылку. Посетители будут переходить по ней и покупать продукты WPShop, за что вы получите вознаграждение. Пример:
[omnivideo title="Название" show_partner="1" youtube="https://youtu.be/8YelOiEbGwI" poster="auto"]
Инструкция, как пользоваться блоком Гутенберг для вставки видеоролика с Ютуб:
- В блочном редакторе Вордпресс найдите блок «OmniVideo».
- В параметрах блока найдите поле для вставки ссылки на YouTube ролик. Вы также можете добавить линки на другие видеохостинги и выбрать вариант, который будет отображаться на главной вкладке.
- Здесь же вы можете настроить другие опции или оставить все по умолчанию. Если поменяете дефолтные значения, они применятся только для этого блока. В ином случае подтянутся параметры из общих настроек плагина. Это такие функции, как стиль блока, иконки и заголовки сервисов, маскировка ссылок. Здесь же можно включить отображение партнерской ссылки для дополнительного заработка.
- Заполните поле «Описание видео» и сохраните блок.
Подробнее о работе блока Gutenberg в Omnivideo
Теперь лайфхак, как при помощи нового плагина OmniVideo решить проблему с неработающими роликами YouTube на Вордпресс. Для российских пользователей добавьте альтернативные источники видео и сделайте вкладку YouTube одной из последних. В этом случае все, кто заходит на сайт из России, смогут посмотреть видеоролик с VK Video или RuTube, а остальные — привычным способом через YouTube.
Промокод на лицензию OmniVideo
WP YouTube Lyte: отложенная загрузка для видео YouTube
WP YouTube Lyte — небольшой удобный плагин для Вордпресс, который добавляет функцию отложенной загрузки к плееру YouTube. Это позволяет сократить время загрузки страницы.
Модуль также встраивает микроразметку VideoObject и делает видеоролики адаптивными.
YouTube Embed: добавление отдельных роликов и плейлистов
С помощью Вордпресс модуля YouTube Embed можно добавлять стандартные видео или целые коллекции.
Вставка видеоролика или плейлиста производится с помощью настраиваемых шорткодов.
YouTube WordPress Plugin by Embed Plus: отдельные ролики, плейлисты и «ленивая» загрузка
Плагин YouTube WordPress Plugin by Embed Plus предоставляет функцию lazy load для улучшения производительности сайта на базе CMS Вордпресс.
Он также позволяет выводить как одиночные видеоролики, так и целые плейлисты. Для вставки видео на Вордпресс предусмотрен специальный блок Гутенберг.
Essential Grid Gallery WordPress Plugin: премиум-решение для вставки картинок, видео и аудио из разных источников
Плагин Essential Grid Gallery предоставляет интеграцию Вордпресс с различными иностранными платформами видео, аудио и изображений, такими как YouTube, Vimeo, Flickr и др.
Данная утилита позволяет создавать эффектные галереи, для которых можно подбирать подходящий дизайн из большой библиотеки шаблонов.
Плагин совместим с конструктором Elementor и популярным модулем для создания интернет-магазинов WooCommerce.
YouTube Video Gallery: сетки и галереи для роликов Ютуб
YouTube Video Gallery предоставляет два удобных формата для вывода на Вордпресс видеороликов с вашего канала: в виде сетки или в виде галереи.
Оба варианта вставляются на страницы сайта с помощью настраиваемых шорткодов.
YouTube Embed, Playlist and Popup: всплывающее окно для роликов
Плагин YouTube Embed, Playlist and Popup позволяет встраивать адаптивные видеоролики или плейлисты в посты блога на основе Вордпресс с помощью шорткодов.
Для активации функции всплывающего окна потребуется приобрести Pro-версию, что сейчас для российских пользователей может быть проблематичным.
Разных плагинов для вставки видео с Ютуб много. Но только премиальный OmniVideo предлагает решение для пользователей, у которых видеохостинг не работает. Поэтому для своих сайтов Вордпресс я выбираю именно это расширение.
Скидка на OmniVideo
Пожалуйста, оцените материал: