Ruang Service.Com - Script Lazy Load Youtube Blogger 100% Work - Apakah Kalian Ingin menggunakan Lazy load YouTube embed Video di Situs Blogger? Ya, Artikel Cocok untuk Kalian

Script Lazy Load Youtube Blogger 100% Work

Hai Teman-teman, saya akan membagikan cara mengurangi waktu unggah video YouTube di situs web Anda dan Mengurangi Waktu Pemuatan Situs Web Dengan embed Lazy Load Youtube. Ini menciptakan beberapa langkah sederhana untuk situs web Anda. Anda membuat perubahan sederhana pada skrip HTML situs web Anda sedikit ke iframe.

Script Lazy Load Youtube Blogger 100% Work

Apa yang salah dengan menggunakan skrip Iframe YouTube default di web?

Iframe YouTube default menggunakan banyak sumber daya di situs web Anda. Ini memperlambat kecepatan memuat situs web Anda. Jadi, situs Anda dimuat dengan sangat lambat.

Skrip Iframe YouTube yang disematkan membutuhkan 400 hingga 800 KB menggunakan 40 hingga 65 persen dari seluruh ukuran halaman Anda. Jadi, bagaimana cara mengurangi waktu pemuatan Iframe YouTube Anda untuk kinerja yang lebih cepat.

Itu memuat semua halaman dan beranda Anda. Saat Anda memeriksa halaman web Anda di google insight, Anda akan melihat kesalahan seperti Speed YouTube.

Kesalahan pemicu Kecepatan Halaman Google juga disebutkan di bawah ini.

Kurangi waktu eksekusi JavaScript
Tidak menggunakan pendengar pasif untuk meningkatkan kinerja pengguliran
Kurangi dampak kode pihak ketiga
Beberapa sumber daya pihak ketiga dapat dimuat dengan lambat dengan fasad
Hapus JavaScript yang tidak digunakan

Bagaimana Cara Kerja Lazy Load Youtube Embed Script?

Lazy load youtube embed video adalah metode tradisional memuat video youtube di blog. itu tidak akan memuat sumber daya yang diperlukan pada saat memuat halaman, hanya memuat pengguna yang dapat memainkannya atau tidak.

Alih-alih memuat video Youtube di mulai Instan, dapat menunda waktu pemuatan iframe youtube dengan mengaktifkan malas. jadi, pengguna menggulir dan memutar video, video akan dimulai.

Secara otomatis menghemat bandwidth Server Anda dan meningkatkan kecepatan memuat situs web Anda lebih cepat. Ini tidak memblokir tugas apa pun, hanya memuat saat Anda membutuhkan waktu.

tetapi, alih-alih menggunakan Lazyload, Anda dapat menambahkan placeholder kecil. ini adalah gambar tombol sederhana dan digunakan untuk membuka Video tersemat YT ketika pengunjung mengklik tombol tersebut.

Dengan cara ini, browser hanya akan memuat gambar yang tidak memuat video YT. Anda dapat memuat Yt Video Klik tombol Putar. Sekarang Anda Bisa Memahami Cara Kerja Script. Mari Lihat cara Menambahkan skrip iframe Youtube Embed Video Youtube di Website blogger Anda.jika Anda ingin Mengunduh Skrip ini, silakan tekan tombol Unduh dan Unduh Semua Skrip di Perangkat

Bagaimana cara menambahkan Video Embed Lazy Load Youtube di Blogger Langkah Demi Langkah

Cukup Ikuti cara Sederhana ini untuk Mengaktifkan Lazy load Youtube Script di blogger

Langkah 1: Buka Akun Blogger Anda
Langkah 2: Pilih bagian "Tema" di bilah sisi
Langkah 3: dan, Klik "Edit Html" pada Menu DropDown
Langkah 4: Sekarang Tekan Ctrl+F Dan Cari tag </body> pada skrip.
Langkah 5: Salin Script CSS & JS pada File yang Diunduh
Langkah 6: Sekarang Tempel Script Di Atas pada tag </body>.
Langkah 7: Dan, Sekarang Simpan semua Perubahan pada tema Anda

<!-- youtube Lazy load - Edited by ruangservice.com  -->
<style>
.Pixabin-youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 5px;
}
.Pixabin-youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent;
}
.Pixabin-youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  transition: 0.4s all;
}
.Pixabin-youtube-player img:hover {
  -webkit-filter: brightness(75%);
  -moz-filter: brightness(75%);
  filter: brightness(75%);
}
.Pixabin-youtube-player .play {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
   background: url("https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg") no-repeat;
  cursor: pointer;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function labnolIframe(div) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute(
    "src",
    "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
  );
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("allowfullscreen", "1");
  iframe.setAttribute(
    "allow",
    "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  );
  div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
  var playerElements = document.getElementsByClassName("Pixabin-youtube-player");
  for (var n = 0; n < playerElements.length; n++) {
    var videoId = playerElements[n].dataset.id;
    var div = document.createElement("div");
    div.setAttribute("data-id", videoId);
    var thumbNode = document.createElement("img");
    thumbNode.src = "https://i.ytimg.com/vi/ID/hqdefault.jpg".replace(
      "ID",
      videoId
    );
    div.appendChild(thumbNode);
    var playButton = document.createElement("div");
    playButton.setAttribute("class", "play");
    div.appendChild(playButton);
    div.onclick = function () {
      labnolIframe(this);
    };
    playerElements[n].appendChild(div);
  }
}
document.addEventListener("DOMContentLoaded", initYouTubeVideos);
//]]>
</script></div>

  <!-- youtube Lazy load - Edited by ruangservice.com  -->

Langkah 8: Sekarang buka posting atau halaman baru di Blogger
Langkah 9: Ubah Mode HTML di Posting atau Halaman Blog Anda
Step10: Dan Tempel Kode HTML pada File yang Diunduh
Langkah 11: Jika Semua Pekerjaan Selesai. Sekarang saatnya Ngetes Apakah Berfungsi atau tidak

Masukkan scrip di bawah ini di Postingan atau di page, ingat ya mode HTML 😀

<div class="Pixabin-youtube-player" data-id="VIDEO_ID"></div>

Penutup

Terima kasih telah membaca artikel Script Lazy Load Youtube Blogger 100% Work, semoga artikel ini membantu Anda yang malas memuat skrip video embed YouTube. Jadi, dukung blog kami, dan jangan lupa Bookmark.