Рецепт создания YouTube плагина для WordPress

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

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

Стандартное встраивание WordPress

По умолчанию в WordPress существует специальный функционал для вставки видео с YouTube.

К примеру:

Check out this video:
http://www.youtube.com/watch?v=dQw4w9WgXcQ

..URL будет преобразован в:

Check out this video:
<iframe width="560" height="315" src="http://www.youtube.com/watch?v=dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

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

Как 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:

<?php
/**
 * Plugin Name: SitePoint YouTube Embed
 * Plugin URI: http://sitepoint.com/
 * Description: An plugin to embed YouTube videos responsively.
 * Version: 1.0
 * Author: Narayan Prusty
 */

Создание шорткода

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

Далее следует код создания шорткода. Поместите следующий листинг в файл youtube-embed.php:

function youtube_embed_callback($atts=null, $content=null)
{
    extract($atts);

    return "<div class='youtube-container-parent'><div class='youtube-container-child'><div class='youtube-video' data-id='". $id ."'></div></div></div>";
}

add_shortcode("youtube", "youtube_embed_callback");

Далее вот так мы сможем использовать его на странице:

Если вы сейчас попробуете поставить шорткод на страницу, то ничего не увидите потому что вместо возврата iframe, мы возвращаем простой div с ID видео. Мы динамически буем подставлять код после того как пользователь нажмёт на кнопку проигрывания видео, что позволит выиграть в времени загрузки страницы.

Динамическая загрузка видео с YouTube

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

Поместите следующий код в файл youtube-embed.js:

window.addEventListener("load", function(){
    var v = document.getElementsByClassName("youtube-video");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + v[n].dataset.id + '/hqdefault.jpg"><div class="play-button"></div>';
        p.onclick = youtube_video_clicked;
        v[n].appendChild(p);
    }
}, false);

Мы находим все DOM элементы с классом youtube-video и передаём значение атрибуту data-id. Затем добавляем тег img во внутренний тег div для вставки миниатюры.

Для подключения скрипта добавьте следующий код в файл youtube-embed.php:

function register_youtube_embed_plugin_scripts()
{
    wp_register_script("youtube-embed-js", plugins_url("youtube-embed/youtube-embed.js"));
    wp_enqueue_script("youtube-embed-js");
}

add_action("wp_enqueue_scripts", "register_youtube_embed_plugin_scripts");

Теперь наш шорткод преобразуется в что-то подобное:

Следующим шагом будет подгрузка iframe, если пользователь кликнет по миниатюре. Для этого поместите следующий код в youtube-embed.js:

function youtube_video_clicked() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}

При клике по миниатюре будет загружен тег iframe с настройкой авто-воспроизведения со значением true. Теперь при клике по изображению мы увидим видео.

Делаем видео адаптивным

Для обеспечения адаптивности добавьте следующий CSS в файл youtube-embed.css:

.youtube-container-child
{
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.youtube-container-child iframe, .youtube-container-child img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Для подключения таблицы стилей добавьте следующий код в файл youtube-embed.php:

function register_youtube_embed_plugin_styles()
{
    wp_register_style("youtube-embed-css", plugins_url("youtube-embed/youtube-embed.css"));
    wp_enqueue_style("youtube-embed-css");
}

add_action("wp_enqueue_scripts", "register_youtube_embed_plugin_styles");

Теперь наш видео будет похоже на это:

Создание кнопки вставки шорткода

Теперь давайте создадим кнопку для текстового редактора, при клике на которую в текстовом поле появится наш шорткод.

Для добавления кнопки в редактор WordPress воспользуемся Quicktags API.

Поместите следующий код в файл youtube-embed.php:

function youtube_shortcode_text_editor_script()
{
    if(wp_script_is("quicktags"))
    {
        ?>
            <script type="text/javascript">

                QTags.addButton(
                    "youtube_shortcode",
                    "Youtube Embed",
                    youtube_callback
                );

                function youtube_callback()
                {
                    var id = prompt("Please enter your video id");

                    if (id != null)
                    {
                        QTags.insertContent('<div class="flex-video widescreen"><iframe width="425" height="344" src="http://www.youtube.com/embed/id="'+id+'"][/youtube?wmode=transparent" frameborder="0" allowfullscreen=""> </iframe></div>');
                    }
                }
            </script>
        <?php
    }
}

add_action("admin_print_footer_scripts", "youtube_shortcode_text_editor_script");

Таким образом мы создали кнопку youtube_shortcode. При клике сработает, youtube_callback и будет вставлен шорткод.

Вот как это будет выглядеть:

Создание кнопки для визуального редактора

Таким же образом мы можем создать кнопку для визуального редактора. К примеру TinyMCE.

Добавьте код в файл youtube-embed.php для регистрации TinyMCE плагина:

function enqueue_mce_plugin_scripts($plugin_array)
{
    //enqueue TinyMCE plugin script with its ID.
    $plugin_array["youtube_button_plugin"] =  plugin_dir_url(__FILE__) . "mce.js";
    return $plugin_array;
}

add_filter("mce_external_plugins", "enqueue_mce_plugin_scripts");

function register_mce_buttons_editor($buttons)
{
    //register buttons with their id.
    array_push($buttons, "youtube");
    return $buttons;
}

add_filter("mce_buttons", "register_mce_buttons_editor");

Далее нам нужно написать JavaScript функционал для отображения окошка в которое мы будем вставлять ID видео. Для этого вставьте код в файл mce.js:

(function() {
    tinymce.create("tinymce.plugins.youtube_button_plugin", {

        init : function(ed, url) {

            //add new button
            ed.addButton("youtube", {
                title : "Youtube Embed",
                cmd : "youtube_command",
                image : "https://cdn3.iconfinder.com/data/icons/free-social-icons/67/youtube_square_color-32.png"
            });

            //button functionality.
            ed.addCommand("youtube_command", function() {
                var id = prompt("Please enter your video id");
                if (id != null)
                {
                    ed.execCommand("mceInsertContent", 0, '<div class="flex-video widescreen"><iframe width="425" height="344" src="http://www.youtube.com/embed/id="'+id+'"][/youtube?wmode=transparent" frameborder="0" allowfullscreen=""> </iframe></div>');
                }
            });
        },

        createControl : function(n, cm) {
            return null;
        },

        getInfo : function() {
            return {
                longname : "Extra Buttons",
                author : "Narayan Prusty",
                version : "1"
            };
        }
    });

    tinymce.PluginManager.add("youtube_button_plugin", tinymce.plugins.youtube_button_plugin);
})();

Теперь при клике на кнопку youtube будет вызван колбэк youtube_command.

Вот как это выглядит:

Итог

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