Cara Membuat Lazy Load Youtube Dengan Tombol Play Responsive

Cara Membuat Lazy Load Youtube Dengan Tombol Play Responsive- Yahallo balik lagi sama admin , kali ini saya ingin membagikan tutorial membuat iframe youtube pada blog agar terlihat responsive dan menjadi lebih ringan karena sudah menggunakan script lazy load.

Untuk penggunaanya pun sangat mudah kalian cukup memasang css serta javascript , setelah itu memasukan link video youtube yang ingin diposting.Ok tanpa banyak cincong langsung saja ke step by stepnya:

1.Seperti biasa buka Blogger > Tema > Edit Html

2.Cari kode </style> masukan css berikut tepat diatasnya , jangan lupa klik Simpan Tema


/* Lazy Youtbe By Exploit */
.lazy-youtube{background-color:#414141;position:relative;overflow:hidden;padding-top:56.30%;cursor:pointer;border-radius:3px;}
.lazy-youtube img{width:100%;top:-16.84%;left:0;opacity:.7}
.lazy-youtube .play-button{width:60px;height:60px;z-index:1;opacity:.9;border-radius:50px;border:2px solid rgba(255,255,255,.8)}
.lazy-youtube .play-button:hover{border-color:#ea6d23}
.lazy-youtube .play-button:hover:before{border-color:transparent transparent transparent #ea6d23}
.lazy-youtube .play-button:before{content:'';border-style:solid;border-width:10px 0 10px 15px;border-color:transparent transparent transparent rgba(255,255,255,.8);border-radius:3px;margin-left:1px}
.lazy-youtube img,.lazy-youtube .play-button{cursor:pointer}
.lazy-youtube img,.lazy-youtube iframe,.lazy-youtube .play-button,.lazy-youtube .play-button:before{position:absolute!important}
.lazy-youtube .play-button,.lazy-youtube .play-button:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
.lazy-youtube iframe{height:100%;width:100%;top:0;left:0}

3.Eits belum selesai jika sudah silahkan kalian cari lagi kode </body> setelah itu masukan script JS berikut ini tepat diatasnya:

<!-- Lazy Load Youtube -->
<script>/*<![CDATA[*/ registerListener('load', lazyLoad); registerListener('scroll', lazyLoad); function lazyLoad(){var lazy = document.getElementsByClassName('lazy'); for(var i=0; i<lazy.length; i++) {if(isInViewport(lazy[i])){lazy[i].src = lazy[i].getAttribute('data-src');}} } function isInViewport(el){ var rect = el.getBoundingClientRect(); return ( rect.bottom >= 0 && rect.right >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) );} function registerListener(event, func) { if (window.addEventListener) { window.addEventListener(event, func) } else { window.attachEvent('on' + event, func) }} /*]]>*/</script>
<script>/*<![CDATA[*/( function() {var youtube = document.querySelectorAll(".lazy-youtube"); for (var i = 0; i < youtube.length; i++) {var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; var image = new Image(); image.setAttribute("class", "lazy"); image.setAttribute("data-src",source); image.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="); image.addEventListener( "load", function() {youtube[ i ].appendChild( image );}( i ) ); 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 ); }); }; })(); /*]]>*/</script>

4.Kalau sudah semua pastikan Simpan Tema nya

5.Untuk memposting video , buat Post di Halaman atau Entri setelah itu masuk ke tab HTML masukan kode berikut ini :

<div class='lazy-youtube' data-embed='s1tAYmMjLdY'>
  <div class='play-button'></div>
</div>

Note : Untuk mengkonfigurasi-nya sangat mudah
-Salin url youtube yang ingin kalian tampilkan misal
- Contoh url video youtube : https://www.youtube.com/watch?v=B5896C3hFBc
yang perlu kalian salin adalah kode dibelakangnya : B5896C3hFBc dan masukan ke tag dibawah ini :