Membuat Video Youtube Responsive Lazy Load Di Postingan Blogger

Apakah Anda ingin meningkatkan keterlibatan pembaca anda dengan blog anda? Apakah anda ingin meningkatkan traffic pengunung blog anda?.

Jika jawabannya "YA", maka trik sederhana ini akan membantu anda meningkatkan keterlibatan pembaca serta menurunkan rasio pentalan blog Anda. Kenapa?, karena saat ini orang lebih memilih video daripada konten tertulis, orang lebih suka belajar dengan video dari pada dengan tulisan. Dengan video, kita bisa belajar sambil menonton. Untuk mensiasati hal tersebut, anda harus menggabungkan blog Anda dengan video YouTube, maka blog anda tak mudah menalami pentalan pembaca dan banyak dikunjungi, hingga akhirnya dapat meningkatkan traffic pembaca blog anda.

Pada artikel ini saya akan memberi tahu Anda cara menambahkan video YouTube di halaman postingan blogger dan cara melakukan video YouTube agar mudah di load tanpa memperlambat kinerja blog.

Bagaimana cara menerapkan lazy loading di Blogger?

Jika anda melakukan pencarian lazy load melalui browser di internet, banyak sekali plugin yang berisi script yang postingan yang mengulas plugin lazy load. Anda dapat menggunakan plugin tersebut (selama bisa digunakan). Tapi perlu anda ingat, plugin tersebut terkadang diisi kode-kode yang tidak perlu yang dapat menghilangkan manfaat kinerja.

Membuat Video Youtube Responsive di Halaman Postingan Blogger

Pada situs Blogger, ada dua cara umum yang biasa dilakukan pemilik blog untuk menyematkan Video yotube di blogger.

Cara pertama video Youtube disematkan atau ditempatkan di halaman dashboard blogger.
Cara ke dua, video Youtube disematkan atau ditempatkan di halaman postingan blogger.

Dari kedua cara tersebut, menurut saya cara kedua sangat menguntungkan, karena selain berisi artikel lengkap postingan anda juga dilengkapi dengan tampilan video yang pastinya melengkapi isi artikel anda. Jadi gabungan antara isi artikel dan video Youtube dapat memudahkan pembaca untuk memahami isi dari artikel anda

Mengapa Harus menambahkan Script Lazy Load Video YouTube di Blogger?

Iframe YouTube default yang cenderung kami sematkan di situs web kami memperlambat kecepatan pemuatan dengan memuat banyak sumber daya ketika video Youtube di putar.

Iframe default Blogger untuk video YouTube yang disematkan akan memakan waktu sekitar 500-700 kb yang berkontribusi sekitar 50-60 persen dari seluruh ukuran halaman. Jadi, betapapun melelahkan Anda mengoptimalkan gambar, CSS, dan pemuatan Javascript Anda, bertindak sebagai hambatan dalam kinerja kecepatan.

Jika anda menyematkan video YouTube dengan metode class defaultnya, itu akan memuat sumber daya yang diperlukan segera setelah halaman dimuat, bahkan jika pengguna memutar video tersebut atau tidak. Ini sangat memperlambat kecepatan situs web Blogger.

Untuk mengatasi kesalahan ini, teknologi pemuatan lambat digunakan yang menunda waktu muat video YouTube. Jadi, ketika pengguna menggulir halaman, sumber daya akan dimuat secara otomatis. Ini jelas sangat menghemat bandwidth server dan memuat halaman web lebih cepat. Ini juga tidak akan memblokir tugas utas utama dalam kecepatan pembacaan halaman dan memuat halaman hanya jika diperlukan.

Dengan cara ini, browser hanya akan memuat thumbnail video dan ketika pengguna mengklik tombol putar, video akan dimuat dan diputar. Sekarang kita telah memahami Cara Kerja Lazy Load Video YouTube. Mari selami bagian implementasi sehingga Anda dapat melakukan hal yang sama pada situs web Anda dan membuatnya lebih cepat dan lancar.

Script Default Blogger untuk Iframe Video Youtube

Sebelum kita memulai menulis script lazy load untuk video yotube, sebagai bahan acuan anda harus mengetahui script standar/default dari Blogger untuk embed video youtube di halaman postingan Blogger.

Bila anda tak mengutak-atik script temlate Blogger anda, dan ketika anda akan menyematkan video Youtube ke dalam halaman postingan. Secara otomatis Blogger telah menyiapkan script untuk video youtube tersebut.

Semua script default Blogger di bagi menjadi beberapa class, seperti class='separator' untuk <div> dan class='BLOG_video_class' untuk tampilan iframe.

Biar lebih jelasnya di bawah ini adalah scrit default blogger untuk embed video Youtube:

Script default Blogger untuk Video Youtube halaman postingan

<div class="separator" style="clear: both; text-align: center;">
    <iframe
      allowfullscreen=""
      class="BLOG_video_class"
      height="266"
      src="https://www.youtube.com/embed/eLUzpkSqGwo"
      width="320"
      youtube-src-id="eLUzpkSqGwo"
    ></iframe>
</div>

Dengan script tersebut tampilan video Youtube berukuran 266 x 320. Hasilnya terlihat sangat kecil, ada border hitam dibagian atas bawah dan tidak responsive. Biar tampilannya lebih besar dan responsive, anda harus mengubah script di atas dengan farameter yang baru.

Cara Menulis Script Lazy Load video Youtube

Pada bagian ini kita coba mengubah script default tersebut dengan menambahkan sedikti Javascript agar tampilan video Youtube terlihat menarik dan responsive. Seperti biasa untuk mengutak-atik script HTML template Blogger, anda harus aktif di halaman editor script HTML template. Pada halaman editor template Blogger anda cari kode </body> anda langsung saja menuju kebagian akhir template. Di bagian atas kode </body> anda ketikkan script berikut ini.

Script default Blogger untuk Video Youtube halaman postingan

<script crossorigin='anonymous' integrity='sha512-q583ppKrCRc7N5O0n2nzUiJ+suUv7Et1JGels4bXOaMFQcamPk9HjdUknZuuFjBNs7tsMuadge5k9RzdmO+1GQ==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js'/>
<script crossorigin='anonymous' integrity='sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=' src='https://code.jquery.com/jquery-3.7.1.js'/>

Buat file CSS

Setelah anda memasukkan kedua script di atas, langkah berikutnya adalah membuat file CSS yang gunanya untuk mempercantik tampilan video Youtube. Masih pada editor HTML tempalte Blogger, anda cari script </head>. Tepat di atas script </head> tersebut anda letakkan kode CSS di bawah ini.

Letakkan di atas kode </head>

<b:if cond='data:view.isPost'>
<style type='text/css'>
/*<![CDATA[*/
.youtube{
text-align:center;
margin:0 auto;
width:100%;
}
.video-youtube-lazy{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
margin:0;
}
.video-youtube-lazy:before{
content:"\f16a";
font-family:FontAwesome;
font-size:600%;
position:absolute;
top:50%;
left:50%;
margin:-32px 0 0 -32px;
cursor:pointer;
opacity:.7;
transition: all 0.2s ease-out;
}
.video-youtube-lazy:hover:before{
color:red!important;
opacity:1;
}
.youtube img{
width:100%;
height:auto;
margin-top:-9%;
z-index:1;
}
.youtube iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
}
/*]]>*/
</style>
</b:if>

Kode <b:if cond='data:view.isPost'> pada script di atas menandakan script tersebut hanya dapat aktif di halaman postingan artikel Blogger anda.

Buat file JavaScript

Dengan script CSS di atas video Youtube anda sudah terlihat lebih menarik dari scrip bawaan blogger, sekarang kita akan membuat file video tersebut agar lebih responsive. Untuk melakukan pekerjaan ini gunakan Javascript yang akan membuatnya lebih ringan ketika di putar.

Langkahnya sama dengan cara di atas, tepat di atas kode </body> anda ketikkan kode Javascript di bawah ini.

Letakkan di atas kode </body>

<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
function videoPlay(anchor){
anchor.innerHTML = anchor.innerHTML.replace('<!--','').replace('-->','');
anchor.onclick= null;
return false;
};
//]]>
</script>
</b:if>

Embed Video Youtube ke Halaman Postingan Blogger

Untuk melakukan embed video Youtube ke dalam halaman postingan anda dapat membaca artikel kami sebelumnya.

Kami anggap anda telah memahami cara embed video Youtube ke dalam postingan Blogger, jadi kita langsung lanjutkan saja. Masih pada tampilan editor script HTML template Blogger anda, cari script video youtube default Blogger, setelah ketemu kita ubah script tersebut dengan sdcript di bawah ini.

Ubah script <iframe> default Blogger

<div class="youtube" onclick="videoPlay(this)">
<div class="video-youtube-lazy">
<img class="lazyload" alt="Cara Embed Video Youtube Lazy Load di Blogger" src="http://i.ytimg.com/vi/eLUzpkSqGwo/hqdefault.jpg" width="500" height="281"/> 
<iframe class="lazyload" youtube-src-id="eLUzpkSqGwo" title="Cara Embed Video Youtube Lazy Load di Blogger" src="http://www.youtube.com/embed/eLUzpkSqGwo" autoplay="1" autohide="1" frameborder="0" allowfullscreen="1"></iframe>
</div>
</div>
</div> 
</div>  
<!--  <div class="separator" style="clear: both; text-align: center;">
    <iframe
      allowfullscreen=""
      class="BLOG_video_class"
      height="266"
      src="https://www.youtube.com/embed/eLUzpkSqGwo"
      width="320"
      youtube-src-id="eLUzpkSqGwo"
    ></iframe>
</div>   -->

Perhatikan script warna merah, kode baris tersebut adalah kode script <iframe> default blogger. Dalam hal ini kode script tersebut kami matikan atau kami nonaktifkan, dan kami ganti dengan script di atasnya.

Sedangkan kode "title" adalah judul dari video Youtube anda, dan kode "youtube-src-id" adalah ID video Yotube.

Menyematkan video YouTube sangat bagus untuk strategi pemasaran konten. Tetapi menambahkan video juga dapat menambah waktu muat ekstra ke blog anda. Dengan menerapkan pemuatan lambat untuk penyematan YouTube di situs Anda, Anda dapat meningkatkan performa halaman secara signifikan dengan mengurangi dampak payload besar, seperti JavaScript, yang dapat memperlambat rendering halaman. Dengan menggunakan gambar mini dan mengatur video agar dimuat hanya saat terlihat, Anda dapat lebih mengoptimalkan pengalaman pengguna.

Dengan menggunakan modul lazy load yang disediakan dalam artikel ini, bersama dengan petunjuk langkah demi langkah, Anda dapat dengan mudah menerapkan lazy loading untuk sematan YouTube anda. Jangan biarkan muatan besar memengaruhi kecepatan halaman dan pengalaman pengguna Anda lagi. Cobalah lazy loading di situs Anda sendiri dan lihat sendiri perbedaannya.

Saya harap metode ini membantu anda. Jika Anda menemukan kesulitan, beri komentar di bawah. Saya akan senang membantu anda.

Warnet Dapurnet

Internet Cafe