Script Lazy Load Youtube

Script Lazy Load Youtube mempercepat kecepatan loading sebuah situs tutorial
3 min read
Menerapkan Script lazy load youtube

Apakah Anda pernah mendengar tentang teknik lazy load? Jika belum, lazy loading adalah salah satu teknik optimasi performa website yang bertujuan untuk mempercepat kecepatan loading sebuah situs web. Teknik ini bekerja dengan memuat elemen website hanya saat pengguna memerlukannya, bukan saat halaman web pertama kali dimuat.

Salah satu contoh penerapan dari teknik lazy load adalah memuat gambar hanya saat pengunjung men-scroll halaman website. Dengan cara ini, gambar tidak akan membebani kecepatan loading halaman web.

Namun, apakah mungkin menerapkan teknik lazy load pada video dari YouTube? Tentu saja, teknik ini juga dapat diaplikasikan pada video YouTube dengan cara memuat video hanya saat pengunjung mengkliknya. Dengan demikian, teknik lazy load dapat mempercepat kecepatan loading situs web Anda.

Jika Anda meng-embed video dari YouTube, video akan dimuat hanya saat pengguna mengkliknya. Oleh karena itu, teknik ini dapat membantu meningkatkan performa situs web Anda dengan mengurangi waktu loading halaman.

Script Lazy Load Youtube

  • Ada sedikit perubahan penulisan saat meng-embed video youtube, jika kalian biasanya mengembed video youtube seperti berikut :
<iframe width="560" height="315" src="https://www.youtube.com/embed/<pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(51, 51, 51); color: rgb(255, 255, 255);">&lt;<span class="hljs-selector-tag" style="color: rgb(252, 194, 140);">iframe</span> <span class="hljs-attribute" style="color: rgb(255, 255, 170);">width</span>=<span class="hljs-string" style="color: rgb(162, 252, 162);">"560"</span> height=<span class="hljs-string" style="color: rgb(162, 252, 162);">"315"</span> src=<span class="hljs-string" style="color: rgb(162, 252, 162);">"https://www.youtube.com/embed/s1tAYmMjLdY"</span> frameborder=<span class="hljs-string" style="color: rgb(162, 252, 162);">"0"</span> allow=<span class="hljs-string" style="color: rgb(162, 252, 162);">"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"</span> allowfullscreen&gt;&lt;/iframe&gt;</pre>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  • Perhatikan kode yang saya tandai, itu adalah link video youtube, yang kalian butuhkan hanya belakangnya saja yaitu : s1tAYmMjLdY
  • Pada lazy youtube ini penulisannya berubah, penulisannya menjadi sebagai berikut :
<div class="wrapper">
    <div class="youtube" data-embed="s1tAYmMjLdY">
        <div class="play-button"></div>
    </div>
</div>

Jika kalian sudah paham cara diatas, selanjutnya simak tutorial berikut.

  • Yang pertama, tambahkan dahulu CSS berikut pada blog kalian, taruh diatas ]]></b:skin>.
html{background-color:#f3f3f3}
.wrapper{max-width:680px;margin:60px auto;padding:0 20px}
.youtube{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden;cursor:pointer}
.youtube img{width:100%;top:-16.82%;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;
  • Kemudian, tambahkan script ini diatas </body>.
( 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 )}
)}
}
)();
  • Perhatikan kode yang saya tandai, itu adalah kualitas gambar thumbnail video youtube. kalian bisa merubah resolusi thumbnailnya, berikut keterangannya.
No Kode Resolusi
1 sddefault 320×180 pixels
2 hqdefault 480×360 pixels
3 sddefault 640×480 pixels
4 maxresdefault 1920x1080 pixels

Demo :

Youtube video

Akhir Kata

Terima kasih telah membaca artikel tentang Script Lazy Load YouTube. Artikel ini memberikan informasi tentang teknik lazy load yang dapat membantu meningkatkan kecepatan loading situs web Anda, terutama pada video dari YouTube.

Saya harap artikel ini bermanfaat bagi Anda. Jangan ragu untuk memberikan saran dan pertanyaan di kolom komentar di bawah ini. Saya akan dengan senang hati menjawabnya dan menerima masukan untuk perbaikan di masa depan.

Terima kasih atas perhatiannya dan sampai jumpa di artikel selanjutnya.

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

Blogger. Infokudia.eu.org
Premium By Infokudia With Infokudia

You may like these posts

  • Apakah Anda pernah mendengar tentang teknik lazy load? Jika belum, lazy loading adalah salah satu teknik optimasi performa website yang bertujuan untuk mempercepat kecepatan load…
  • Pengertian Table Of Content Table of content atau biasa disingkat TOC adalah daftar isi artikel pada blog yang biasanya ditemukan di awal artikel, Daftar isi biasanya mencakup j…
  • Kalian pasti sudah tidak asing lagi kan mendengar kata meta tag. tapi apa sih meta tag itu dan apa fungsinya ? pada artikel kali ini saya akan membahas pengertian meta tags dan c…
  • SEO atau Search Engine Optimization adalah proses meningkatkan kualitas dan kuantitas traffic ke sebuah website melalui pencarian organik di mesin pencari seperti Google, Bing, Y…
  • Robots.txt adalah sebuah file yang digunakan untuk memberi instruksi pada mesin pencari seperti Google, Bing, dan Yahoo tentang bagian dari situs web yang tidak perlu diindeks at…
  • Dalam dunia digital marketing, SEO dan SEM adalah dua istilah yang sering digunakan. Meskipun keduanya memiliki tujuan yang sama yaitu meningkatkan visibilitas website di mesin …

Post a Comment