Плагин Lite YouTube Embed для WordPress

Плагин Lite YouTube Embed от Mihdan служит для реактивного встраивания YouTube роликов на вашем сайте под управлением WordPress.

Данное решение обеспечивает встраивание видео с повышенным акцентом на визуальную производительность.

Пользовательский элемент <lite-youtube> внешне выглядит также, как и стандартный <iframe> от YouTube, но рендерится примерно в 224 раза быстрее.

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

Сравнение

Встраивание через <iframe>

Встраивание через <lite-youtube>

Установка плагина

Для установки плагина необходимо перейти в раздел «Плагины», далее выбрать меню «Добавить новый».

На обновившейся странице в строке поиска плагина (вверху справа) необходимо ввести словосочетание из названия плагина. На этот момент плагин точно будет найден при вводе mihdan youtube.

После того, как WordPress нашел плагин, нажмите кнопку «Установить».

После установки кнопка «Установить» изменится на «Активировать». Ее необходимо нажать, чтобы активировать плагин.

Поздравляем! Плагин установлен, теперь необходимо разобраться с его настройками.

Настройки плагина

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

После установки и активации, плагин создает новое меню: «Настройки» — «Lite Youtube Embed» в панели управления.

Страница настроек плагина на текущий момент состоит из 3-х вкладок, которые на скриншоте обозначены литерами: A, B, C.

• A — содержит основные настройки, влияющие на фронтенд, а также более специфичные параметры.
• B — на этой вкладке вы можете очистить oEmbed кэш.
• C — здесь находятся контакты разработчика плагина.

Рассмотрим каждую настройку на каждой вкладке, разберем, зачем и как их использовать.

Вкладка «Основные настройки»

На вкладке A настройка под номером 1 позволяет плагину получать информацию с серверов YouTube о видеоролике, например описание, название для микроразметки. Для этого параметра необходимо получить и ввести ключ API. Сделаем это.

Ключ API

Шаг 1 — google-аккаунт

Чтобы получить ключ API необходимо иметь гугл-аккаунт. Если таковой уже есть у вас, переходите к Шагу 2. Зарегистрировать новый аккаунт можно стандартным способом. Перейдите по этой ссылке на страницу входа в аккаунт и нажмите «Создать аккаунт», выберите тип аккаунта. Для настоящей инструкции был выбран пункт меню «Для себя». Далее действуйте согласно инструкции.

Шаг 2 — регистрация в панели разработчика

Теперь у вас есть google-аккаунт. Чтобы создать ключ API нажмем на ссылку регистрации сайта в панели разработчика Google. То есть мы сообщим Google, что есть такой-то сайт и мы хотим получить разрешение на использование возможностей YouTube.

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

Кликнув по ссылке, переходим в панель разработчика, которое нас встречает всплывающим окном (если вы тут первый раз).

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

Шаг 3 — создание доступа к API

Условия вы приняли, окно закрылось и перед вами появился большой ассортимент сервисов, имеющих API (квадратные белые карточки). Нам нужна белая карточка с названием YouTube Data API v3. Ее можно найти, прокрутив мышь немного вниз, либо написать в поисковой строке Youtube.

Нажмите и вас перекинет на новую страницу. Мы уже почти закончили. Далее нажмите «Включить». Сайт немного подумает (30-60 секунд, может быть и дольше). После этого вас перебросит на страницу с информацией о YouTube Data API v3, где необходимо нажать «Создать учетные данные».

Оказавшись на странице добавления учетных данных выберите тип YouTube Data API v3, как показано на изображении ниже. Затем выберите, откуда будете вызывать API, указав Веб-браузер (JavaScript). Далее выберите, к каким данным будете обращаться, указав «Общедоступные данные». Далее нажмите кнопку «Выбрать тип учетных данных».

Можно считать, что вы создали ключ API. Можете скопировать его и пользоваться, но настоятельно рекомендуем нажать ссылку «Добавить ограничения» во избежание злоупотреблений кем-либо, если вдруг ключ попал в чужие руки (модератору, фрилансеру и т.п.). Нажмем её и попадем на страницу добавления ограничений.

Правильным и достаточным будет настроить параметр «Допустимый тип приложений». Здесь необходимо выбрать «HTTP-источники перехода (веб-сайты)» и нажать кнопку «Добавить элемент».

Помимо этого можно указать имя ключа, а также выбрать для какого именно ключа API работает выбранное ограничение.

Теперь можно возвращаться в админ-панель нашего сайта и вставить скопированный ключ API в отведенное для него поле в настройках плагина. После сохранения изменений вы увидите объявление, что API ключ корректен.

Description

Второй параметр «Description» позволяет задать собственное описание для параметра itemprop, в случае, если у вас включен параметр «Использовать микроразметку», который в нашем примере идет под номером 3.

Обратите внимание, что если вы используете ключ API, то параметр Description не имеет силы, поскольку в этом случае информация для этого параметра подгружается автоматически с сайта Youtube.

Использовать микроразметку

Параметр «Использовать микроразметку» мы слегка упомянули в предыдущем разделе. Данный параметр позволяет отключать и включать микроразметку schema.org . Это нужно для целей поисковиков, чтобы они понимали, что данный объект является видео и видели его параметры, такие как название, длительность, описание.

Использовать отложенную загрузку (Lazy Load)

Данный параметр позволяет внедрить ленивую загрузку. То есть предварительный просмотр (он же превью/картинка) видео будет загружаться только по мере появления на экране. Этот параметр будет особенно полезен при наличии нескольких видео на странице.

Использовать асинхронную загрузку

Данный параметр позволяет загружать предварительный просмотр (он же превью/картинка) видео параллельно с загрузкой сайта. Этот параметр будет особенно полезен при наличии нескольких видео на странице.

Скриншот для объяснения последних двух параметров:

Качество предпросмотра

Параметр «Качество предпросмотра» отвечает за то, какого качества будет превью/картинка видео. Если видео небольшого размера (ШхВ), то можно спокойно оставить параметр по умолчанию. Если же видео, условно, занимает всю ширину сайта, то уместнее выбрать качество предпросмотра выше.

Размер плеера

Данный параметр позволяет изменить размер плеера на подходящий. «Размер плеера» прямо коррелирует с предыдущим параметром «Качество предпросмотра», поскольку, чем больше размер плеера, тем лучше должно быть качество превью видео.

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

Вкладка «Инструменты»

Инструмент «Очистить кэш» позволяет обновить закэшированные данные для видео. Рекомендуется очищать кэш всякий раз, когда изменяете настройки на вкладке «Основные настройки».

Пример

Как загрузить 20 видео на страницу и не притащить весь YouTube на сайт. Плагин Lite YouTube Embed

Возможные ошибки

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

Ниже привожу список обнаруженных багов и пути их решений.

Плагин Autoptimize

Для правильной работы Lite YouTube Embed добавьте в исключения ленивой загрузки (Lazy-load) следующий класс lite-youtube__image:

И в исключения JS/CSS добавьте следующие скрипты: frontend.js и frontend-full.js:

Помочь проекту

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

Plugin WordPress YouTube Производительность