Skip to main content

Recent Disqus

Click Here On Load Disqus

Optimasi Blog dengan Menggunakan Lazyload Youtube

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.


Optimasi Blog dengan Menggunakan 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
Reactions
PERHATIAN:Jika anda mendownload di blog ini, maka anda akan di redirect terlebih dahulu ke laman Short Safelink untuk keamanan blog. Oleh karena itu jika terjadi error 404 maka terjadi kesalahan dalam klik di laman redirect atau terjadi refresh laman redirect. Untuk mengatasinya anda bisa mengulang kembali klik file yang akan anda download di blog ini. Dan Jika anda ingin bertanya atau bantuan bisa kontak kami dengan Klik Disini atau nomor berikut 089677337414 - Terima kasih.
Newest Post
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar