√ Script Lazy Load YouTube Embed Untuk Mempercepat Website

Script Lazy Load YouTube Embed Untuk Mempercepat Website

April 16, 2022

Assalammualaikum, terimakasih.eu.org, Script Lazy Load YouTube Embed Untuk Mempercepat Website - Banyak Pertanyaan bagaimana cara optimasi lazy load YouTube pada website seperti blogger, wordpress, Laravel, CI, Bootsrap dan lain sebagainya, yang sangat penting dan baik untuk meningkatkan performa situs web. Cara optimasi menggunakan script lazy ini sudah banyak dipergunakan oleh para pengelola website, dan kami akan bagikan kepada Anda plus sedikit racikan SEO agar kita sama-sama mengoptimalkan kecepatan web.

Dimana saat ini kecepatan Website sangat penting, terlebih lagi untuk mempercepat proses index di google. Pada kesempatan kali ini, tim akan membahas pengoptimalan video youtube yang di posting pada website. Pada umumnya postingan video untuk halaman web, dapat di embed melalui script iframe yang telah tersedia dari YouTube. Dimana ketika kita membukanya, akan terdapat tiga url yang menyatu pada halaman tersebut, hal ini akan mengurangi kecepatan situs web yang kita lihat.

Bagaimana Cara Optimasi Script Lazy Load Youtube?

Gambar Script lazy load YouTube Untuk Mempercepat Website

Kita akan menggunakan script lazy load YouTube, pada optimasi ini umumnya sama dengan lazy gambar, menggunakan beberapa script yang akan di bagikan berikut tata cara atau tutorialnya. Keunggulannya dari script lazy ini dapat berkerja di berbagai platform, dan juga framework, seperti blogger, wordpress, Laravel, bootsrap, CI, bahkan front-end sekalipun.

Apabila Anda tidak dapat menggunakannya, padahal telah mengikuti tutorial dan memasang script lazy load YouTube, dapat bertanya di kolom komentar, atau bisa memesan layanan jasa loading Website. Baiklah langsung praktek saja, dan silahkan bagikan kepada rekan-rekan apabila Anda sudah memahaminya.

Pasang Script Lazy Load YouTube Pada Head

Pasang script pertama tepat pada bagian atas kode. Caranya dengan menuju ke tema blogger dan lakukan edit html, atau ke tema website Anda, cari kode /head, kemudian Copy dan paste kode script di bawah ini:

<style>

/* Youtube Lazy by oye.or.id */

.oye-youtube-player {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

max-width: 100%;

background: #000;

margin: 0px;

}

.oye-youtube-player iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 100;

background: transparent;

}

.oye-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;

}

.oye-youtube-player img:hover {

-webkit-filter: brightness(75%);

-moz-filter: brightness(75%);

filter: brightness(75%);

}

.oye-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>

Pasang Script Lazy Load YouTube Diatas Body

Selanjutnya adalah memasang script lazy load youtube tepat diatas kode </body> pada template Anda silahkan copy dan paste dibawah ini.

<style>

/* Youtube Lazy by oye.or.id */

.oye-youtube-player {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

max-width: 100%;

background: #000;

margin: 0px;

}

.oye-youtube-player iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 100;

background: transparent;

}

.oye-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;

}

.oye-youtube-player img:hover {

-webkit-filter: brightness(75%);

-moz-filter: brightness(75%);

filter: brightness(75%);

}

.oye-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>

//<![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("oye-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>

Memasang Video YouTube Pada Postingan

Apabila Anda ingin menambahkan video di blogger, cara embed youtube sangat mudah, tinggal klik menu video dan klik YouTube, dan cari file menurut yang diinginkan. Setelah itu akan menemukan kode iframe YouTube secara default kodenya seperti di bawah.

<iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/2jd95YfwIRs" width="320" youtube-src-id="2jd95YfwIRs"></iframe>

Pasang Script YouTube Play Di Postingan

Perhatikan id code diatas yang telah di beri tanda Anda copy, kemudian ganti script iframe menjadi seperti di bawah ini, untuk memanggil menu class yang di tuju. Silahkan Copy dan Paste script dibawah, dan masukkan id Youtube yang di dalam postingan.

Optimasi YouTube Player Menggunakan SEO

Punisher akan memberikan tips optimasi YouTube sebagai tambahan dengan menambahkan teknik SEO. Caranya sangat simple dan mudah yaitu dengan menambahkan alt dan title pada video yang akan di tampilkan pada halaman website. Silahkan tambahan kode alt="Isi Keyword", dan title="Isi Keyword". Agar Anda lebih mudah punisher berikan script langsung di bawah ini silahkan copy dan paste.

Sangat mudah sekali bukan?, cara mengoptimalkan kecepatan website dan menampilkan video player YouTube pada postingan dengan script lazy load. Sekarang Anda dapat langsung praktek dan silahkan bagikan kepada rekan-rekan yang lain, untuk mendapatkan kecepatan website walaupun menampilkan video YouTube dalam postingan atau halaman web Anda.

Penutup

Demikian yang dapat kami sampaikan, tentang Script Lazy Load YouTube Embed Untuk Mempercepat Website. Jangan sungkan untuk bertanya di kolom komentar, semoga dapat memberikan manfaat bagi kita semua, sampai jumpa kembali di Informasi berikut nya. Dan tetap stay di terimakasih.eu.org, Wassalamu'alaikum.

Punisher April 16, 2022