Оптимизация сайта: подключение YouTube плеера

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

Данный способ был придуман разработчиком Alexis Ulrich, и он без каких либо усилий позволяет увеличить скорость загрузки сайта в несколько раз.

HTML

Вначале нам необходимо прописать HTML код, который будет заменять нам всем известный iframe

<div class="youtube" id="ibSNMyNtNn4" style="width: 500px; height: 281px;"></div>

В атрибут id необходимо вставить идентификатор вашего видео на YouTube.

Для тех кто не знает, идентификатор находится здесь…

CSS

После этого вам нужно добавить в отдельный файл, следующий CSS код.

Внутри данного кода, вам нужно добавить путь к изображению кнопки play.

Изображение кнопки и все файлы будут находиться в конце записи.

.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('Путь к изображению кнопки') no-repeat; /*ВАЖНО: здесь укажите адрес до изображения кнопки play*/
    background-position: 0 -50px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: absolute;
    height: 50px;
    width: 69px;
    transition: none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
 
.youtube:hover .play {
    background-position: 0 0;
}

JavaScript (jQuery)

Последним этапом мы добавляем jQuery код.

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    if (!document.getElementsByClassName) {
        // Поддержка IE8
        var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |$)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i<j; i++)
                if(re.test(els[i].className))a.push(els[i]);
            return a;
        }
        var videos = getElementsByClassName(document.body,"youtube");
    } else {
        var videos = document.getElementsByClassName("youtube");
    }
 
    var nb_videos = videos.length;
    for (var i=0; i<nb_videos; i++) {
        // Находим постер для видео, зная ID нашего видео
        videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';
 
        // Размещаем над постером кнопку Play, чтобы создать эффект плеера
        var play = document.createElement("div");
        play.setAttribute("class","play");
        videos[i].appendChild(play);
 
        videos[i].onclick = function() {
            // Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1
            var iframe = document.createElement("iframe");
            var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
            if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
            iframe.setAttribute("src",iframe_url);
            iframe.setAttribute("frameborder",'0');
 
            // Высота и ширина iFrame будет как у элемента-родителя
            iframe.style.width  = this.style.width;
            iframe.style.height = this.style.height;
 
            // Заменяем начальное изображение (постер) на iFrame
            this.parentNode.replaceChild(iframe, this);
        }
    }
});