Tutorial Lazy Load YouTube Embed Video di Blogspot (Super Ringan dan Responsif!)

Daftar Isi

Lazy load YouTube adalah teknik di mana video YouTube hanya akan dimuat saat pengguna mengklik thumbnailnya. Ini sangat berguna untuk mempercepat waktu muat halaman blog, karena iframe video YouTube hanya akan dimuat saat benar-benar dibutuhkan.

ukuran halaman web lebih kecil dan ringan

Di tutorial ini, saya akan membagikan cara membuat sistem embed video YouTube yang lebih ringan, cepat, dan responsif di platform Blogspot. Semua ini kita lakukan tanpa menggunakan plugin tambahan, hanya dengan sedikit penyesuaian CSS dan JavaScript.

Seiring berkembangnya teknologi web, optimisasi kecepatan menjadi salah satu aspek yang sangat penting. Menggunakan lazy load adalah salah satu cara untuk menjaga agar blog kita tetap ringan dan cepat. Dengan metode ini, video tidak akan dimuat secara langsung di awal, sehingga mempercepat waktu loading halaman.

Bagaimana Cara Menambahkan Embed Video YouTube?

Untuk menambahkan video YouTube ke artikel Blogspot, kamu cukup menggunakan tag <div> seperti di bawah ini. Di dalamnya, kamu hanya perlu menambahkan atribut data-id yang berisi ID video YouTube yang ingin kamu tampilkan.

<div class="lazy-youtube" data-id="4NMJW_YRog8"></div>

Ganti 4NMJW_YRog8 dengan ID video YouTube yang ingin kamu tampilkan.

load halaman dengan video youtube lebih cepat

CSS untuk Membuat Tampilan Responsif

Berikut adalah kode CSS untuk memastikan bahwa video YouTube akan tampil dengan ukuran yang tepat, responsif, dan tanpa mengganggu tampilan blogmu. Pastikan kamu menambahkan kode CSS ini di dalam tag <style> di dalam template Blogspot atau di bagian Theme jika kamu ingin membuatnya global.

<style>/* Container utama video */
.lazy-youtube {
  position: relative;
  width: 100%; /* Agar video fleksibel mengikuti lebar kontainer */
  max-width: 560px; /* Agar tidak terlalu besar di desktop */
  aspect-ratio: 16 / 9; /* Menjaga rasio 16:9 */
  margin: 0 auto 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
}

/* iframe YouTube akan mengisi seluruh div */
.lazy-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Tombol play overlay */
.lazy-youtube::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoJh-w9tor-4KQsx-2k5FhMPA6_XbQUMCJbnPhO0LhOwql67GWdlT0RjaA2ZaO4AvoGWeT4HYF13iZpa1O3iDXhnye2wlkVgsI2tjolO1sFG6cz648krIJ9KOSVjoctblLKghtFVMWOMuKt9ELeG3HOUbhKm7qfLwW-aHZhfW9uU_OYKunM3aWP9cgVqM/s250/youtube%20play%20button.webp') no-repeat center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

/* Bug fix sementara: jika thumbnail undefined muncul, sembunyikan */
img[src*="undefined"] {
  display: none !important;
  visibility: hidden;
  height: 0 !important;
}

/* Saat video sudah diputar, sembunyikan tombol play */
.lazy-youtube.played::after {
  display: none;
}</style>

JavaScript untuk Memuat Video Saat Diklik

Kita perlu menambahkan sedikit JavaScript agar video YouTube hanya dimuat saat elemen <div> tersebut diklik. Ini memastikan bahwa video hanya dimuat saat dibutuhkan, sehingga mengurangi beban awal pada halaman.

Berikut adalah kode JavaScript yang akan memuat iframe YouTube hanya saat pengguna mengklik thumbnail video: tempatkan diatas </body>.

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".lazy-youtube").forEach(function (div) {
    const videoId = div.dataset.id;
    if (!videoId) return; // Jika ID tidak valid, abaikan

    // Set gambar thumbnail sebagai background
    div.style.backgroundImage = `url('https://img.youtube.com/vi/${videoId}/hqdefault.jpg')`;
    div.style.backgroundSize = "100% auto";
	div.style.backgroundPosition = "center";
	div.style.backgroundRepeat = "no-repeat";
	div.style.backgroundColor = "black";

    // Saat div diklik, ganti dengan iframe video
    div.addEventListener("click", function () {
      div.classList.add("played"); // Untuk menghilangkan tombol play
      div.innerHTML = ""; // Kosongkan isi div
      div.style.backgroundImage = "none"; // Hapus background

      const iframe = document.createElement("iframe");
      iframe.setAttribute("src", "https://www.youtube-nocookie.com/embed/" + videoId + "?autoplay=1&amp;rel=0");
      iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
      iframe.setAttribute("allowfullscreen", "1");

      div.appendChild(iframe);
    });
  });
});
</script>

menunda memuat player youtube sebelum video di putar

Penjelasan Kode

Berikut adalah penjelasan singkat mengenai setiap bagian kode:

• HTML: Kita menggunakan <div> dengan kelas lazy-youtube dan atribut data-id yang berisi ID video YouTube.
• CSS: Kode CSS di atas memastikan video YouTube responsif dan tombol play muncul di tengah thumbnail.
• JavaScript: JavaScript akan menangani penggantian thumbnail dengan iframe YouTube hanya setelah div diklik, yang akan mengurangi beban loading halaman.

Kelebihan Teknik Lazy Load Video YouTube

• Ringan dan Cepat: Hanya memuat video saat diperlukan, meningkatkan kecepatan halaman.
• Responsif: Desain otomatis menyesuaikan dengan ukuran layar, baik itu desktop maupun mobile.
• Keamanan: Menggunakan YouTube No-Cookie untuk lebih menjaga privasi pengunjung.
• Kustomisasi: Kamu bisa mengubah desain, tombol play, atau elemen lainnya sesuai kebutuhan.

menunda memuat javascript yang tidak perlu 🗿 fokus pada apa yang penting

Kekurangan dan Pembahasan Bug

Seperti yang kita ketahui, YouTube terkadang mengirimkan thumbnail dengan ID undefined, yang menyebabkan placeholder tidak hilang dengan sempurna. Namun, hal ini dapat ditangani dengan CSS, meskipun ini hanya solusi sementara.

Ini berarti, meskipun kami sudah mencoba untuk menangani bug ini dengan CSS untuk menyembunyikan thumbnail `undefined`, di beberapa kasus, hal ini masih dapat terjadi jika YouTube memperbarui API atau thumbnail-nya. Namun, secara keseluruhan teknik ini tetap berfungsi dengan baik.

Bonus - Mengatasi Preview Post Thumbnail Tidak Muncul

Supaya preview pada artikel menampilkan gambar maka bisa gunakan kode ini (Sisipkan gambar thumbnail video secara manual menggunakan URL berikut:)

<img src="https://img.youtube.com/vi/VIDEOID/hqdefault.jpg" style="display:none;" alt="YouTube thumbnail" />

Ganti VIDEO_ID dengan ID dari video YouTube yang kamu embed.

Kesimpulan

Meskipun kode ini tidak sepenuhnya sempurna, metode lazy load ini berhasil meningkatkan kecepatan halaman dan memberikan pengalaman pengguna yang lebih baik dengan memuat video hanya saat dibutuhkan. Jika kamu menginginkan video yang lebih cepat dimuat tanpa harus menunggu video YouTube dimuat sepenuhnya, teknik ini adalah pilihan yang sangat baik.

Dengan sedikit improvisasi, kamu bisa memperluasnya dengan fitur lain, seperti menambahkan animasi, efek transisi, atau fallback jika JavaScript dimatikan oleh pengunjung.

Semoga tutorial ini bermanfaat dan blog kamu semakin keren dan cepat!