Script Lazy Load Youtube

Wednesday, September 11, 2019

Script Lazy Youtube For Blogspot

Please copy the following code and paste right above the < / body >


<script>
//<![CDATA[
/*! llyv.js v0.1.0 */
!function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i);var l=document.createElement("img");l.src="https://img.youtube.com/vi/"+t[e].dataset.id+"/hqdefault.jpg",t[e].appendChild(l),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}();
//]]>
</script>

Next copy the following code and paste it directly above the < / b : Skin  >


*/
.llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer}
.llyv{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden}
.llyv img{width:100%;top:-16.82%}
.llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px}
.llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff}
.llyv .llyv-play-btn:hover{background-color:red}
.llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute}
.llyv iframe{height:100%;width:100%;top:0;left:0}
.llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}

Markup in posts

<div class="llyv" data-id="id-video"></div>

How to insert a script lazy load YouTube into Blogspot



CARA CUSTOM DOMAIN BLOGSPOT


CARA BUAT BLOG


CARA BUAT CONTACT FORM BLOG


CARA BUAT SITEMAP


CARA INDEX ARTIKEL


CARA DAFTAR ADSENSE


CARA BUAT ARTIKEL TRENDING


CARA PASANG IKLAN DITENGAH ARTIKEL

sumber : gratis tutorial