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

Ютуб в ВордПресс Плагины

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

Почему не стоит добавлять ролики YouTube на WordPress по ссылке?

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

Однако если вы часто добавляете на сайт ролики, пользоваться таким способом вставки контента с YouTube я не рекомендую.

Приведу несколько аргументов в защиту своего мнения:

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

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

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

Контент нужно обновлять вручную. При любых изменениях видеоролика нужно вмешиваться в код iframe или полностью его заменять. Например, это придется сделать, если автор ролика удалит его с Ютуб.

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

Как встроить видеоролик Ютуб в запись Вордпресс вручную

Кроме вставки прямого линка Ютуб в статью, есть еще два способа добавления видеоконтента в Вордпресс. Но в последнее время все они потеряли актуальность из-за блокировок видеохостинга. Однако если основная аудитория сайта состоит из зарубежных пользователей, вы можете ими воспользоваться.

Как добавить видеоролик с помощью блока Gutenberg

Чтобы вставить видео через редактор Гутенберг, нужно:

  1. Создать новую запись или открыть имеющуюся для редактирования в блочном редакторе Gutenberg.
  2. Выбрать нужное место статьи и поставить туда курсор.
  3. Отыскать в списке блоков YouTube Embed и открыть его.

Блок Youtube в Гутенберг

  1. Ввести в поле этого блока линк YouTube-ролика и сохранить запись.

Как встроить видеоконтент YouTube, используя HTML-код

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

Код iframe

Затем перейдите на веб-сайт Вордпресс и вставьте этот код в запись одним из двух методов:

  • Зайдите в классический редактор (Classic Editor) и перейдите на вкладку «Текст». После этого разместите код внутри записи.
  • Откройте блочный редактор (Gutenberg) и воспользуйтесь виджетом для вставки HTML, чтобы добавить код Ютуб.

Как придать адаптивность плееру Ютуб с помощью CSS-стилей

После встраивания контента c Ютуб на Вордпресс одним из указанных выше способов, вы можете прописать CSS-стили для тега iframe. Это поможет сделать плеер адаптивным.

Для этого сначала оберните iframe с роликом div-контейнером с классом yt-content:

<div class="yt-content"><iframe width="600" height="480" src="Ссылка на ролик" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

А затем добавьте следующий код в CSS-файл вашего шаблона:

.yt-content {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.yt-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Плагины для добавления видео с Ютуб в записи сайта на Вордпресс: лучшие варианты

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

OmniVideo: эффективное решение всех проблем с добавлением видеоконтента


Расширение OmiVideo от WPShop

Новый премиальный модуль OmniVideo — мой любимчик. Он устраняет все проблемы с включением Ютуб-видео на веб-ресурсы Вордпресс. Но самый главный его плюс состоит в том, что он предлагает оптимальный способ обхода блокировок.

Плагин OmniVideo помещает видеоролик в блок с множеством вкладок. На каждой вкладке отображается версия одного и того же видео, размещенного на разных сервисах (при желании можно использовать и разные ролики). Модуль работает с видехостингами Ютуб, Vimeo, Kinescope, VK, Дзен, Рутуб, Mail и др. Посетитель вашего онлайн-ресурса сможет выбрать сервис, на котором предпочитает смотреть видеоконтент.

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

Расскажу о других преимуществах плагина:
Быстрая загрузка страниц сайта на CMS Вордпресс, содержащих видеоролики. Плагин использует технологию Lazy Load для отложенной загрузки ресурсов, которые требуются для проигрывания видео. Они подгружаются только в нужный момент, когда посетитель прокручивает страницу до видеоплеера.
Адаптивность блока с видеороликом. Плеер OmniVideo подстраивается под любой размер экрана и идеально смотрится на всех современных устройствах.
Простые настройки внешнего вида. Можно поменять обложку, вид иконок, тексты заголовков. Есть несколько встроенных стилей оформления. Среди них вы обязательно найдете вариант, который идеально впишется в дизайн сайта.
Грамотная SEO-оптимизация. Плагин добавляет микроразметку к каждому видео, что помогает поисковикам получать полную информацию о ролике. Кроме того, OmniVideo позволяет скрыть ссылки на платформы, где размещены видеоролики. Все это положительно сказывается на SEO-показателях сайта.
Массовая автозамена прямых ссылок с Ютуба блоком OmniVideo. Если до установки плагина вы активно вставляли ролики с помощью тега iframe, можете воспользоваться этой функцией для автоматической замены всех ссылок элементом OmniVideo. После этого обязательно проверьте скорость загрузки страниц. Вы увидите, что она заметно возросла.
Обзор плагина OmniVideo

Поделюсь инструкцией, как использовать OmniVideo для добавления видео с Ютуба. Для этого нужно выполнить следующие шаги:

  1. Скопировать на видеохостинге линк ролика.
  2. Открыть запись в редакторе Гутенберг и выбрать блок «OmniVideo».

Блок омнивидео в Гутенберг

  1. Вставить ссылку в поле, предназначенное для Ютуб-контента.

Вставка ссылки на Youtube

  1. Сохранить изменения и перейти страницу для просмотра видеоролика.
Подробнее о блоке Gutenberg в Omnivideo

Если вы предпочитаете Classic Editor, достаточно сформировать и вставить в запись шорткод вида:

[omnivideo title="Заголовок видеоролика" youtube="URL видео" poster="auto"]

Забрать OmniVideo со скидкой

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

Адаптивный ютуб плагин

WP YouTube Lyte — простое бесплатное WordPress-расширение, предназначенное для решения проблемы с производительностью сайта при добавлении видео с Ютуба. Также оно добавляет адаптивность к стандартному плееру видеохостинга.

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

YouTube Embed: адаптивность, микроразметка и управление настройками

Плагин для Youtube ВП

YouTube Embed — бесплатный плагин для добавления роликов и плейлистов с Ютуба. Делает стандартный плеер адаптивным, добавляет микроразметку и позволяет управлять некоторыми настройками видео, например, автовоспроизведением.

Для добавления видеоконтента на WP-сайт нужно используются шорткоды.

YouTube WordPress плагин: плейлисты, shorts и стандартные ролики

Расширение для Youtube

Модуль YouTube WordPress позволяет добавлять на сайты обычные видеоролики, короткие видео и плейлисты различных каналов. Он улучшает производительность сайта за счет отложенной загрузки ресурсов ролика.

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

Блок Essential Grid Gallery

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

Предоставляет различные шаблоны для галерей, из которых можно выбрать наиболее подходящий под дизайн сайта вариант. Совместим с плагином WooCommerce.

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

YouTube Video Gallery — бесплатное расширение для Вордпресс, которое создает отдельные страницы под каждое видео с Ютуб и объединяет их в галереи.

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

YouTube Embed, Playlist and Popup: множество тонких настроек воспроизведения

Замена стандартного Youtube-плеера

Бесплатный плагин YouTube Embed, Playlist and Popup добавляет адаптивность «родному» плееру Ютуба и предоставляет ряд полезных опций для добавления видеоконтента на страницы Вордпресс.

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

Чтобы видеоконтент на вашем сайте всегда был доступен и не тормозил загрузку страниц, рекомендую использовать модуль OmniVideo. Только он предоставляет полный набор инструментов для устранения всех сложностей, возникающих при добавлении видео на Вордпресс.

Промокод на OmniVideo

Александр

Занимаюсь запуском сайтов более 15 лет. Использовал разные платформы (1С-Битрикс, Joomla, OpenCart, Drupal и пр.), но сейчас в приоритете многофункциональный и простой WordPress при старте новых проектов. Имею богатый опыт работы с CMS, которым стараюсь делиться в статьях.

Оцените автора
Лучшие шаблоны и плагины для WordPress
Добавить комментарий

×
Улучши свой сайт с плагином Clearfy Pro!
Скидка для тебя -15%
Купить со скидкой ⋙