Ролик с ютуба, размещенный на странице, заметно замедляет ее открытие. Там одних скриптов 400к. Вдобавок, они еще и размещены не на вашем сервере…
Идея — размещать на странице не сам iframe, а картинку, по клику на которую ролик откроется.
Код js (он вынесен в отдельный файл) :
// ленивая загрузка видео на главной
'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&loop=1&&playlist=" + this.id;
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);
}
}
});
Код взяла в сети. Но немного изменила — отредактировала параметры вызова ролика. Теперь при подгрузке он начинает работать сразу.
Вызов скрипта разместим внизу страницы. Подгружаться он будет в div с id, равным коду нашего ролика и с классом youtube.
<div class="youtube div-g" id="_Rs_Jou_GEY" style="width: 500px; height: 281px;"></div>