Быстрая подгрузка встроенного видео YouTube средствами JavaScript

При вставке видео из YouTube на страницу встроенными средствами WordPress страница получается не самой быстрой — она полностью загрузится только тогда, когда отобразится видео. А если видео роликов несколько, то иногда ждать их загрузки приходится долго. Выходом из этой ситуации является отложенная загрузка видео — вместо него на странице отображается миниатюра (изображение), а само видео начинает загружаться только после клика по миниатюре. Такой способ быстрой загрузки может существенно сократить общее время загрузки страницы. Есть множество плагинов, которые позволяют делать отложенную загрузку видео из YouTube, но речь в этом посте не о них, а о том, как можно реализовать такое без плагинов.

Тут на помощь приходит Java-код. С его помощью, указав данные видео (достаточно одного ID), можно получить его миниатюру. Вставьте в файл header.php:

"use strict";
$(function() {
    $(".youtube").each(function() {
        // определение миниатюры
        $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');

        // значок Play поверх миниатюры
        $(this).append($('

Обратите внимание на sddefault.jpg — это миниатюра, которая используется для отображения на странице. YouTube создает несколько миниатюр, каждая со своим размером:

default.jpg — 120px на 90px
hqdefault.jpg — 480px на 360px
mqdefault.jpg — 32px на 180px
sddefault.jpg — 640px на 480px
maxresdefault — 1280px на 720px

Вы можете использовать любую из этих миниатюр, вставив в код ее название.

В файл style.css вставьте код оформления блока с миниатюрой:

.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
}

.youtube .play {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ +CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center;
    background-size: 64px 64px;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: .8;
    filter: alpha(opacity=80);
    transition: all 0.2s ease-out;
}

.youtube .play:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

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

</pre>
<p>YouTube предоставляет несколько параметров для отображения разных элементов управления в своем плеере:</p><script data-noptimize="" data-wpfc-render="false">
/* <![CDATA[ */
fpm_start( "true" );
/* ]]> */
</script>

<p>controls: если вы установите 0, то элементы управления не будут отображаться<br />
modestbranding: если вы установите 1, то логотип YouTube не будет отображаться<br />
rel: если вы установите 0, то по завершению ролика не будут отображаться похожие видео<br />
showinfo: если вы установите 0, то подробная информация о видео отображаться не будет<br />
start: время старта видео от начала<br />
vq: если вы установите hd720, то видео будет отображаться в высшем качестве, если такое доступно.</p>
<pre>

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