YouTube самая популярная видео-платформа. Всем хорошо известно, что мы можем встраивать их плеер на свои веб-страницы. Однако простого копирования кода не достаточно. По умолчанию плеер не адаптивен и негативно влияет на время загрузки страницы. В этом случае мы рискуем потерять часть аудитории из-за скорости загрузки страниц.
В этом уроке мы расскажем как создать простой WordPress плагин для вставки YouTube плеера с собственным набором настроек, которые не будут нагружать страницы.
Стандартное встраивание WordPress
По умолчанию в WordPress существует специальный функционал для вставки видео с YouTube.
Check out this video:
http://www.youtube.com/watch?v=dQw4w9WgXcQ
..URL будет преобразован в:
Check out this video:
Однако WordPress вставляет плеер как он есть, без возможности контролировать адаптивность, динамическую подкачку видео и так далее. Чуть поработав, мы можем это исправить.
Как создать простой модуль для Magisk
Как YouTube вставка увеличивает размер страницы?
YouTube позволяет вставлять свой плеер при помощи тега iframe. В этом случае будет закачано примерно ~1MB информации при загрузке страницы. После клика по кнопке плей догрузится ещё ~500KB!
На данном изображении перечислены все ресурсы, которые будут загружены для воспроизведения одного видео:
Всё это негативно сказывается на время загрузки ваших страниц.
Адаптивность видео
По умолчанию, вставляемый YouTube плеер не адаптивен. Ширина составляет 560px; высота 315px. Если же у вас на сайте предусмотрена адаптивность под различные устройства, то контейнер размером 560px слишком избыточен.
Приступаем к созданию плагина!
Давайте создадим плагин, который будет предусматривать все эти нюансы. Перед написанием кода создайте каталог для плагина. Вот так будет выглядеть его структура:
—youtube-embed
-youtube-embed.php
-mce.js
-youtube-embed.js
-youtube-embed.css
Для начала поместите следующий код в youtube-embed.php:
1
2
/**
3
* Plugin Name: SitePoint YouTube Embed
4
* Plugin URI: http://sitepoint.com/
5
* Description: An plugin to embed YouTube videos responsively.
6
* Version: 1.0
7
* Author: Narayan Prusty
8
*/
Создание шорткода
Давайте создадим шорткод под названием youtube, который будет принимать ID видео с YouTube и генерировать HTML код для отображения плеера на странице.
Далее следует код создания шорткода. Поместите следующий листинг в файл youtube-embed.php:
1
function youtube_embed_callback($atts=null, $content=null)
2
3
extract($atts);
4
8
add_shortcode(«youtube», «youtube_embed_callback»);
Далее вот так мы сможем использовать его на странице:
Если вы сейчас попробуете поставить шорткод на страницу, то ничего не увидите потому что вместо возврата iframe, мы возвращаем простой div с ID видео. Мы динамически буем подставлять код после того как пользователь нажмёт на кнопку проигрывания видео, что позволит выиграть в времени загрузки страницы.
Динамическая загрузка видео с YouTube
Мы будет осуществлять рендеринг видео только в случае если пользователь кликнет по видео. На данный момент у нас нет никаких графических элементов, которые бы показывали пользователю что на странице есть видео. Для этого напишем небольшой код вставки миниатюры видео при загрузке страницы и прикрепить к нему прослушку клика.
Поместите следующий код в файл youtube-embed.js:
1
window.addEventListener(«load», function() 2
var v = document.getElementsByClassName(«youtube-video»);
3
for (var n = 0; n < v.length; n++) 4
var p = document.createElement(«div»);
5
p.innerHTML = ‘ 6
p.onclick = youtube_video_clicked;
7
v[n].appendChild(p);
8
>
9
>, false);
Мы находим все DOM элементы с классом youtube-video и передаём значение атрибуту data-id. Затем добавляем тег img во внутренний тег div для вставки миниатюры.
Для подключения скрипта добавьте следующий код в файл youtube-embed.php:
1
function register_youtube_embed_plugin_scripts()
2
3
wp_register_script(«youtube-embed-js», plugins_url(«youtube-embed/youtube-embed.js»));
4
wp_enqueue_script(«youtube-embed-js»);
5
>
6
7
add_action(«wp_enqueue_scripts», «register_youtube_embed_plugin_scripts»);
Теперь наш шорткод преобразуется в что-то подобное:
Следующим шагом будет подгрузка iframe, если пользователь кликнет по миниатюре. Для этого поместите следующий код в youtube-embed.js:
1
function youtube_video_clicked() 2
var iframe = document.createElement(«iframe»);
3
iframe.setAttribute(«src», «//www.youtube.com/embed/» + this.parentNode.dataset.id + «?autoplay=1border=0enablejsapi=1showinfo=0»);
4
iframe.setAttribute(«frameborder», «0»);
5
iframe.setAttribute(«id», «youtube-iframe»);
6
this.parentNode.replaceChild(iframe, this);
7
>
При клике по миниатюре будет загружен тег iframe с настройкой авто-воспроизведения со значением true. Теперь при клике по изображению мы увидим видео.
Делаем видео адаптивным
Для обеспечения адаптивности добавьте следующий CSS в файл youtube-embed.css:
01
.youtube-container-child
02
03
position: relative;
04
padding-bottom: 56.25%; /* 16:9 */
05
padding-top: 25px;
06
height: 0;
07
>
08
09
.youtube-container-child iframe, .youtube-container-child img
10
11
position: absolute;
12
top: 0;
13
left: 0;
14
width: 100%;
15
height: 100%;
16
>
Для подключения таблицы стилей добавьте следующий код в файл youtube-embed.php:
1
function register_youtube_embed_plugin_styles()
2
3
wp_register_style(«youtube-embed-css», plugins_url(«youtube-embed/youtube-embed.css»));
4
wp_enqueue_style(«youtube-embed-css»);
5
>
6
7
add_action(«wp_enqueue_scripts», «register_youtube_embed_plugin_styles»);
Теперь наш видео будет похоже на это:
Создание кнопки вставки шорткода
Теперь давайте создадим кнопку для текстового редактора, при клике на которую в текстовом поле появится наш шорткод.
Для добавления кнопки в редактор WordPress воспользуемся Quicktags API.
Поместите следующий код в файл youtube-embed.php:
08
QTags.addButton(
09
«youtube_shortcode»,
10
«Youtube Embed»,
11
youtube_callback
12
);
13
14
function youtube_callback()
15
16
var enter your video id»);
17
18
if (id != null)
19
20
QTags.insertContent(’16
if (id != null)
17
18
ed.execCommand(«mceInsertContent», 0, ‘