Оптимизация видео с ютуба на сайте
Если вы не первый день в веб разработке, то наверняка знаете что вставив фрейм в нужным видео из горяче любимого Ютуба, сайт начинает грузить сопутствующие скрипты. А весят они очень не мало. Данный пример покажет вам, как можно оптимизировать вывод видео и выдавать нужный контерн только по клику. При этом при загрузке страницы, ничего лишнего загружаться не будет.
Стили
.youtube { background-position: center; background-repeat: no-repeat; position: relative; display: block; overflow: hidden; transition: all 200ms ease-out; cursor: pointer; margin: 40px auto 0 auto; } iframe { margin: 40px auto 0 auto; } .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); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .youtube .play:hover { opacity: 1; filter: alpha(opacity=100); }
Скрипт
"use strict"; function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()} r(function(){ if(!document.getElementsByClassName) { // IE8 support 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++) { // Based on the YouTube ID, we can easily find the thumbnail image videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)'; // Overlay the Play icon to make it look like a video player var play = document.createElement("div"); play.setAttribute("class","play"); videos[i].appendChild(play); videos[i].onclick = function() { // Create an iFrame with autoplay set to true 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'); // The height and width of the iFrame should be the same as parent iframe.style.width = this.style.width; iframe.style.height = this.style.height; // Replace the YouTube thumbnail with YouTube Player this.parentNode.replaceChild(iframe, this); } } });
Пример кода (вставки)
<div id="WcDt3iL88u4" class="youtube" style="width: 100%; height: 315px; background-size: cover;" data-params="rel=0&showinfo=0"></div>