Всем привет. А вы знали, что от скорости загрузки сайта зависит и продвижение вашего сайта в поисковиках. Скажем, google анализирует ваш сайт, и если видит, что он сильно тормозит, выводит его по конкретным ключевым запросам ниже, чем более скоростые сайты. А сравнивает он это всё по цифрам, которые доступны каждому смертному - PageSpeed Insights. Может в ближайшем будущем напишу статью о том, как ускорить сайт на Modx Revolution, а пока расскажу как сделать так, чтобы вызовы YouTube js не замедляли загрузку страницы. Особенно это актуально на мобильных устройствах. Вот что показывает PageSpeed с подключенными скриптами youtube

Это касается скриптов плеера www-embed-player.js и base.js

Нам нужно просто сделать заглушку, которая будет показываться вместо видео, а вот если пользователь нажмет на кнопку просмотра, то тогда уже загрузятся скрипты и откроется настоящее видео с youtube. Поехали:

Создаем скрипт:

(function() {

// get's all video wrapper divs
var youtube = document.querySelectorAll(".youtube");

// iterates through all the divs
for (var i = 0; i < youtube.length; i++) {

/* 
gets the video id we mentioned in the data-embed attribute
to generate image thumbnail urls, youtube has several
resolutions.
- mqdefault 320 x 180
- hqdefault 480 x 360
- sddefault - 640 x 480
- maxresdefault - 1920 x 1080
*/
var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";

/*
creates new image and sets the source attribute to the thumbnail
url we generated above and sets it to load the image on page load
*/
var image = new Image();
image.src = source;
image.addEventListener("load", function() {
youtube[i].appendChild(image);
}(i));

/*
below is where the magic happens, we attach click listeners to the 
video embed divs and when clicked we create a new iframe and sets
it inside the video wrapper div and only then will the js files
associated with the embedded video be loaded
*/

youtube[i].addEventListener("click", function() {

var iframe = document.createElement("iframe");

iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=1");

this.innerHTML = "";
this.appendChild(iframe);
});
};

})();

или вставляем его непосредственно после html кода:

<div class="youtube" data-embed="gJd-99XV0gI">
<div class="play-button"></div>
</div>

где в data-embed вставляем id видео

И добавляем стили:

.youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}

.youtube img {
width: 100%;
top: -16.82%;
left: 0;
opacity: 0.7;
}

.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0, 0, 0, 0.6);
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}

.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
cursor: pointer;
}

.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}

.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0);
}

.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}

Готово. Скрипт сам возьмет превью видео и наложит иконку кнопки проигрывателя. А скрипты youtube не будут подгружаються при первоначальной загрузке страницы. Вот результат проверки скорости на мобильном:

Существенно, правда? Всего хорошего, мои дорогие, надеюсь статья была полезной. Пока!