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);"><<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></iframe></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 :
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