Optimasi Blog dengan Menggunakan Lazyload Youtube

www.azid45.web.id - Optimasi Blog dengan Menggunakan Lazyload Youtube. Assalamualaikum.Wr.Wb semuanya, udah lama saya tidak posting tutorial maupun artikel disini efek fokus ke template toko online simplebli blogger. Baiklah, pada kesempatan ini saya akan share tutorial tentang lazyload youtube.

Lazyoad sendiri saat ini sangat diperlukan untuk mengoptimasi kecepatan blog, selain lazyload image, lazyload javascript, layzload google adsense dan lazyload google analytics ternyata juga ada lazyload youtube yang tentunya penggunaan lazyload ini sangat mudah untuk di pasang.

Lazyload youtube ini saya dapatkan dari situs webdesign.tutsplus.com. Bagi Anda pengguna blog yang sering menampilkan youtube pada setiap artikelnya pastinya akan membuat blog Anda lambat bukan?. Hal tersebut disebabkan harus merender script eksternal dari youtube.

Untuk meningkatkan kecepatan blog Anda tanpa menghapus iframe youtube yang tertanam di artikel, Anda bisa menggunakan script lazyload youtube ini. Simak tutorial dibawah ini:

Pertama, login blogger

Kedua, menuju menu tema dan pilih edit HTML

Ketiga, letakkan kode CSS berikut ini tepat diatas kode </head>

<style>
.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    top: -16.84%;
    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;
}
</style>

Keempat, masih tetap pada menu edit HTML letakkan kode Javascript berikut tepat diatas kode </body>

<script>
//<![CDATA[
( function() {
    var youtube = document.querySelectorAll( ".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.src = source;
                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>

Terakhir, klik simpan template

Sampai disini Blog Anda sudah tersedia lazyload youtube. Untuk menampilkan youtube di setiap Artikel yang Anda inginkan, Anda bisa menggunakan kode HTML dibawah ini

    <div class="youtube" data-embed="letakkan kode embed disini">
        <div class="play-button"></div>
    </div>

Cara Memasang Kode Embed Youtube

Ketika Anda ingin menampilkan youtube di artikel atau di halaman lainnya tentunya Anda akan copy terlebih dahulu embed youtube yang Anda dapatkan di youtube dengan klik tombol bagikan dan akan ada kolom popup kemudian Anda akan klik sematkan.

Pada tahap tersebut Anda akan menjumpai iframe seperti dibawah ini:

<iframe width="560" height="315" src="https://www.youtube.com/embed/MKazjpTyAis" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Dari kode tersebut Anda hanay perlu kode unik yang letaknya setelah embed "MKazjpTyAis" (lihat kode ifram yang saya bold)

Setelah Anda mendapatkan kode tersebut Anda bisa taruh di bagian data-embed, kurang lebih akan seperti dibawah ini:

    <div class="youtube" data-embed="MKazjpTyAis">
        <div class="play-button"></div>
    </div>

Kode HTML tersebut tinggal Anda pastekan di dalam postingan pada mode HTML, nanti akan tampil seperti demo disini

Bagaimana mudah bukan?

Demikian artikel saya terkait Optimasi Blog dengan Menggunakan Lazyload Youtube. Semoga bermanfaat. Amin.

Source Code: https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743