Трудно представить себе ресурс, который полностью лишен видеороликов с YouTube. Этот самый популярный видеосервис предоставляет возможность бесплатно загружать свои видео и просматривать контент, созданный другими пользователями. Встраивание видео с YouTube на платформу WordPress может оказаться сложным процессом, особенно в условиях, существующих в России на данный момент.
Существует два основных способа добавления видео: с помощью плагинов и вручную. При использовании плагина, например, YouTube Embed или WP YouTube Lyte, вы можете легко интегрировать видео,оформляя его в желаемом стиле и добавляя дополнительные функции, такие как автоматическое воспроизведение или скрытие элементов управления.
Если вы предпочитаете вручную встраивать видео, это можно сделать, просто скопировав URL вашего видео с YouTube и вставив его в редактор WordPress. Для этого в редакторе поста достаточно вставить ссылку на видео в отдельной строке. WordPress автоматически преобразует ее в видеоплеер. Также можно использовать опцию «Встроить», доступную под видео на YouTube, для получения кода iframe, который можно вставить в HTML-блок редактора.
Не забудьте проверить настройки конфиденциальности и авторские права, а также убедитесь, что ваше видео соответствует требованиям платформы. Если вы хотите, чтобы ваши пользователи могли взаимодействовать с видео, рассмотрите возможность добавления описаний, тегов и других метаданных, чтобы улучшить видимость вашего контента.
Проблемы с добавлением видео с YouTube на WordPress сайт напрямую
Система YouTube предлагает вставлять видео на веб-сайты через iframe, что является наиболее распространенным методом. Однако данный подход имеет серьезный недостаток — использование встроенного фрейма значительно снижает производительность сайта.
Фреймы, добавленные таким образом, требуют дополнительной загрузки ресурсов при открытии страницы, даже если зритель не намерен просматривать видео. Наличие нескольких фреймов на одной странице может ощутимо замедлить рендеринг.
Кроме того, некоторые фреймы могут вызывать проблемы с адаптивностью на мобильных устройствах, что негативно сказывается на пользовательском опыте. Чтобы минимизировать влияние iframe на производительность сайта, рекомендуется использовать альтернативные методы, такие как загрузка превью изображений с последующим открытием видео во всплывающем окне или на отдельной странице.
Также стоит обратить внимание на оптимизацию кода и использование плагинов, которые помогают интегрировать видео без значительных потерь в скорости загрузки. Важно проверять, какие дополнительные скрипты и стили загружаются вместе с фреймом, и по возможности их минимизировать.
Как добавить адаптивное видео с YouTube без плагина
Без установки дополнительных плагинов можно интегрировать видео на сайт двумя основными способами.
Первый метод — использование блока в редакторе Gutenberg. В этом редакторе уже предусмотрен блок YouTube. Вам нужно добавить его на нужную страницу, указать ссылку на видео и выбрать «Вставить». После этого видео будет автоматически загружено на страницу.
Второй способ заключается в использовании HTML-кода. На странице с видео нажмите кнопку «Поделиться», затем выберите опцию «Встроить».
Откроется окно с iframe-кодом. Скопируйте его.
Далее добавьте этот код в классическом редакторе, выбрав вкладку «Текст» в нужном месте вашей страницы.
В последних версиях WordPress вебмастерам достаточно просто вставить URL конкретного ролика с YouTube в любой текстовый материал. Встроенная функция платформы автоматически преобразует ее в фрейм.
Хотя описанные способы достаточно просты для освоения, они все равно добавляют контент через 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%; }
Добавив приведенные параметры в CSS-файл вашей темы, оберните сами iframe-коды в элемент с указанным классом:
Так вы сможете получить адаптивные видеоролики на своем сайте. Однако не стоит забывать, что это не решает проблему с дополнительными данными, которые загружаются через iframe.
К тому же, в России сейчас наблюдаются проблемы с доступом к YouTube, что увеличивает время загрузки страниц, на которых напрямую встроены видео с этой платформы.
Медленные сайты негативно воспринимаются поисковыми системами.
Лучшие плагины для встраивания видеороликов с YouTube на страницы Вордпресс
Для платформы WordPress создано множество плагинов, которые предоставляют возможность встраивания видео. Каждый из них имеет свои особенности. Рассмотрим некоторые наиболее популярные и эффективные из них.
OmniVideo
Плагин OmniVideo, разработанный командой WPShop, был создан для решения проблемы медленной загрузки YouTube в России. Веб-мастера искали способ интеграции роликов с этого видеохоста на свои сайты, минимизируя возможные проблемы.
С помощью OmniVideo пользователи получают удобные инструменты для работы: интеграция видео с YouTube не требует обращения к внешним ресурсам при открытии страницы. Обложка видео хранится на сервере сайта, а сторонние элементы загружаются только при нажатии на кнопку «Воспроизвести».
Плагин позволяет добавлять видео не только с YouTube, но также с других платформ, таких как ВКонтакте, Дзен, Rutube, Одноклассники, Vimeo и Mail. Все видео помещаются в единый блок, позволяя пользователю выбрать удобный ресурс.
Одной из полезных функций является замена прямых ссылок на видеохостинги на псевдоэлементы, что уменьшает количество внешних ссылок на странице.
Встраиваемый блок обладает полной адаптивностью, имеет микроразметку VideoObject и поддерживает технологию Lazy Load, что приносит дополнительные преимущества страницам с видео в глазах поисковых систем.
Работа с OmniVideo для вебмастера возможна двумя способами: через шорткод или блок Gutenberg. Рассмотрим, как использовать каждый из них.
Для использования шорткода веб-мастер указывает ссылки на видеохостинги, порядок их отображения, заголовок блока, стили и другие параметры. Все настройки шорткода описаны в документации плагина, которая доступна на русском языке.
Специально стоит выделить параметр show_partner, которому можно задать значение 1 или 0. При значении 1 внизу блока будет отображаться партнерская ссылка (закрыта для индексации) на покупку OmniVideo. Если она будет использована, и покупка будет сделана на сайте разработчиков из WPShop, это принесет вам доход. В эпоху современных технологий WPShop является одной из лучших партнерских программ для вебмастеров.
Пример простого использования шорткода для добавления ролика с YouTube выглядит следующим образом:
[omnivideo title="Название видео" title_tag="H2" style="simple" show_partner="1" youtube="https://youtu.be/1TelHiEIGwI" poster="auto"]Описание видео[/omnivideo]В результате получится вот такой блок:
Если описание видео не требуется, шорткод можно оставить открытым.
При использовании Gutenberg необходимо выбрать блок OmniVideo из доступных.
Затем в его настройках указываются ссылки на видеосервисы и иные параметры.
Блок будет выглядеть следующим образом, когда в него добавлены ссылки на несколько видеохостингов:
Обзор функционала блока Gutenberg в OmniVideo:
Все параметры, которые не заданы в шорткоде или блоке Gutenberg, будут установлены по умолчанию. Их можно изменить в панели управления WordPress. Перейдите в раздел «Настройки» — «OmniVideo» и выберите нужные параметры.
Плагин OmniVideo предлагает несколько вариантов оформления блока. Ознакомиться с ними можно на демо-сайте плагина.
Также в настройках есть замечательная функция автоматической замены уже встроенных видео с YouTube. Включите ее, задайте необходимые параметры и нажмите «Сохранить». После этого все видеоролики на вашем сайте, внедренные стандартным способом, будут переработаны в блоки OmniVideo, что обеспечит все его преимущества: отсутствие загрузки внешних ресурсов при открытии страницы, обложку на сервере вашего сайта, Lazy Load и микроразметку.
Плагин продолжает активно развиваться, и в будущем в нем появятся новые интересные функции. Например, уже анонсировано, что вскоре можно будет добавлять рекламные блоки перед видео.