Верх страницы
Обложка к записи Плагин Lite YouTube Embed для WordPress
Время для прочтения: 0 мин. 44 сек.

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

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

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

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

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

Сравнение

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

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

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

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

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

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

Устанока плагина Lite YouTube Embed

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

Активация плагина Lite YouTube Embed

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

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

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

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

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

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

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

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

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

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

Ключ API

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

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

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

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

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

API key  Lite YouTube Embed

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

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

Шаг 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Как загрузить 20 видео на страницу и не притащить весь YouTube на сайт. Плагин Lite YouTube Embed

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

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

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

Плагин Autoptimize

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

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

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

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

ВКонтакте
Одноклассники
Telegram

Комментарии
Подписаться
Уведомить о
guest
33 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Юда
Юда
1 год назад

После установки плагина на сайт сервер возврашает:

This page isn’t working

cars.org.il is currently unable to handle this request.HTTP ERROR 500

И так на нескольких сайтах. C чем это может быть связано?

Юда
Юда
1 год назад
Ответить на  Кобзарёв Михаил

Обновил до 7.3.

Сайт перестал падать, но видео всеравно не выводяться. Отключил плагины кеширования и отимизации скорости — результата 0.

Может проблема из за API Key?

Юда
Юда
1 год назад
Ответить на  Кобзарёв Михаил

Скидывал кеш и через плагин и через WP Rocket. Сейчас отключил все плагины и добавил новый пост.

Страница с новым постом грузиться норм — https://cars.org.il/%D7%94%D7%97%D7%9C%D7%A4%D7%AA-%D7%9E%D7%92%D7%91%D7%99%D7%9D-%D7%9C%D7%A8%D7%9B%D7%91-%D7%91%D7%93%D7%99%D7%A7%D7%AA-%D7%9E%D7%92%D7%91%D7%99%D7%9D-%D7%9C%D7%A4%D7%A0%D7%99-%D7%94%D7%97%D7%95%D7%A8/

А главная с архивом постов еле грузиться и выводит только последние 2 поста (вместо 10) — https://cars.org.il/

Андрей К
Андрей К
1 год назад

Плагин очень нужный, но после установки плагина вылетела главная страница, сделанная на Elementor, ошибка — Out of memory (allocated 786432000) (tried to allocate 20480 bytes). После деактивации плагина все заработало. Очень просим поправить плагин!)

Артур Абакаров
1 год назад

Выдало такую вот ошибку и не активировало плагин..

Fatal error: Uncaught Error: Class ‘Mihdan\LiteYouTubeEmbed\WP_OSA’ not found in /home/c/ce34372/wordpress/public_html/wp-content/plugins/mihdan-lite-youtube-embed/src/class-main.php:60 Stack trace: #0 /home/c/ce34372/wordpress/public_html/wp-content/plugins/mihdan-lite-youtube-embed/mihdan-lite-youtube-embed.php(28): Mihdan\LiteYouTubeEmbed\Main->__construct() #1 /home/c/ce34372/wordpress/public_html/wp-admin/includes/plugin.php(2255): include(‘/home/c/ce34372…’) #2 /home/c/ce34372/wordpress/public_html/wp-admin/plugins.php(177): plugin_sandbox_scrape(‘mihdan-lite-you…’) #3 {main} thrown in /home/c/ce34372/wordpress/public_html/wp-content/plugins/mihdan-lite-youtube-embed/src/class-main.php on line 60

maxim fursov
1 год назад

После активации плагина перестают отображаться картинки на странице и рейтинги звезд. После отключения установленного на сайте LiteSpeed Cache вроде все работает.

maxim fursov
1 год назад
Ответить на  Кобзарёв Михаил

Похоже, что да. Спасибо за ответ.

maxim fursov
1 год назад

Подскажите, как вы видео с Ютуба вставляете что оно растягивается на 100%? Вы оборачиваете видео в какой-то тег в ручную или как-то это можно через function.php настроить?

Boosss
Boosss
11 месяцев назад

Блин а в чем может быть дело ? вроде все по инструкции настраивал плагин, Api ключ пишет в итоге API key is invalid.

Sam Durrant
Sam Durrant
7 месяцев назад

Добрый вечер! Спасибо за плагин и работу!
Появился вопрос: Использую вставку ссылок на предыдущие статьи сайта, через Gutenberg. Но подхватывается css от Вашего плагина.
к классу «wp-block-embed__wrapper» прописывается «before» с «background»
а к нужному классу «.block-editor-page .wp-block-embed .wp-block-embed__wrapper iframe» и вовсе «display: none».

Как же быть тогда? Как использовать Вставку URL? )
Проверил на новом черновике в редакторе, и Вставка URL выводит background с youtube..

Sam Durrant
Sam Durrant
7 месяцев назад
Ответить на  Кобзарёв Михаил

На внешней стороне сайта https://lenium.ru/ всё нормально.
Когда захожу в редактор и выбираю Вставку URL (Вставить), тогда подхватываются scss стили lite-youtube плагина
Прикрепил скрин!

lite-yt.jpg
Sam Durrant
Sam Durrant
6 месяцев назад
Ответить на  Кобзарёв Михаил

Спасибо огромное! Да, ошибка ушла! )

Кстати, попробовал по инструкции поставить API, и он валидный, но данные не подхватываются.. После обновления кэша выводит ошибки (title, desc и пр.) А консоль в API выдаёт 4хх код ошибки якобы..
Пока пришлось сбросить на базовый API, чтобы хотя бы название ролика отображалось..

Sam Durrant
Sam Durrant
6 месяцев назад

Здраствуйте! Еще нашёл один нюанс.. Если у ролика на ютуб стоит «Доступ по ссылке», то картинка не выводится..

Sam Durrant
Sam Durrant
6 месяцев назад

Еще один вопрос или пожелание.. Можно ли будет сделать в будущем как-то поддержку встраивания видео в Виджеты? Сейчас я использую просто код, как разработчик, и вставляю его как html. Но клиентам это конечно же не удобно.
Хотя есть спрос на это дело.. сейчас используется в виджете 4 видео Вашим плагином, но через код встраиваю )
Если будет, то Спасибо!

Oc Devial
Oc Devial
5 месяцев назад

Добрый день После установки плагина некоторые видео не показывает. Открываешь — а там серая картинка — и критическая ошибка. После деактивации плагина все видео показывает с ютуб .все норм. Почему одни видео норм а другие нет?