Youtube Lazy Loader

Ide ini bergotong-royong Saya ambil dari sebuah artikel - Lazy Load YouTube Videos. Tapi Saya pikir kodenya terlalu panjang. Dan prosedurnya juga terlalu rumit. Berikut ini yakni versi paling sederhana dari jQuery YouTube Lazy Loader:

jQuery

$(function() {     $('a.youtube-link').each(function() {         var yt_url   = this.href,             yt_id    = yt_url.split('?v=')[1],             yt_title = $(this).text();         $(this).replaceWith('<div class="youtube-box" style="background-image:url(http://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play"></span></div>');         $('div.youtube-box').click(function() {             $(this).replaceWith('<iframe class="youtube-frame" src="//www.youtube.com/embed/' + yt_id + '?autoplay=1"></iframe>');         });     }); });

CSS

.youtube-box, .youtube-frame {   display:block;   width:420px; /* Lebar video */   height:315px; /* Tinggi video */   background-color:black;   background-size:100%;   position:relative;   border:none;   margin:0px auto 15px; }  .youtube-box span {   display:block;   position:absolute;   top:0px;   right:0px;   bottom:0px;   left:0px; }  .youtube-box .youtube-title {   background-color:rgba(0,0,0,0.4);   font:bold 15px Verdana,Arial,Sans-Serif;   color:white;   text-shadow:0px 1px 2px black;   bottom:auto;   line-height:30px;   height:30px;   overflow:hidden;   padding:0px 15px; }  .youtube-box .youtube-bar {   background:black url('http://4.bp.blogspot.com/-7keKvgPlMUA/T7vJpi3X_YI/AAAAAAAACtw/4OUd7uHadDk/s1600/yt-bar-center.png') repeat-x top;   height:35px;   top:auto; }  .youtube-box .youtube-bar .yt-bar-left {   background:transparent url('http://4.bp.blogspot.com/-WL_y2cwe57k/T7xHS3C8tTI/AAAAAAAACug/xIqhenfa-4o/s1600/yt-bar-left.png') no-repeat top left;   z-index:4;   cursor:pointer; }  .youtube-box .youtube-bar .yt-bar-right {   background:transparent url('http://1.bp.blogspot.com/-DCNevn4jQx0/T7vJt3X3pjI/AAAAAAAACuA/uIKxoT3685M/s1600/yt-bar-right.png') no-repeat top right; }  .youtube-box .youtube-play {   cursor:pointer;   width:83px;   height:56px;   top:50%;   left:50%;   margin:-28px 0px 0px -42px;   background:transparent url('http://1.bp.blogspot.com/-JVqaIffy7Ws/T7vK4-ya81I/AAAAAAAACuI/UCL8Y7G4DqE/s1600/yt-play.png') no-repeat top left; }  .youtube-box .youtube-play:hover {   background-position:bottom left; }

HTML

Cukup tulis beberapa tautan dengan format ibarat ini maka jQuery akan mengubah mereka semua menjadi video (dalam versi palsu pada ketika pertama, dan akan berkembang menjadi video orisinil sehabis diklik):

<a class="youtube-link" href="URL-Halaman-YouTube">Judul Video</a>

Lihat Demo

Cara kerjanya sangat sederhana. jQuery akan mencari semua tautan yang mempunyai kelas youtube-link. Setelah elemen ditemukan, maka jQuery akan mencari atribut href darinya untuk mengambil ID video:

var yt_url = this.href,     yt_id = yt_url.split('?v=')[1]; // Mendapatkan ID video dari URL

Kemudian juga mengambil teks dari tautan tersebut sebagai judul video palsu yang akan kita buat nanti:

var yt_title = $(this).text();

Setelah ID dan teks didapatkan, maka ia akan menggunakannya untuk membangun elemen-elemen yang tampak sebagai video dengan latar belakang gambar dan judul yang diambil dari data tadi:

$(this).replaceWith('<div class="youtube-box" style="background-image:url(http://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play"></span></div>');

Video tidak akan dipanggil hingga sejauh ini, hingga ketika seorang pengunjung (penonton) mengeklik video palsu yang kita buat, maka video palsu tersebut akan berkembang menjadi elemen <iframe> yang akan memuat video asli:

$('div.youtube-box').click(function() {     $(this).replaceWith('<iframe class="youtube-frame" src="//www.youtube.com/embed/' + yt_id + '?autoplay=1"></iframe>'); });

Format URL yang diperbolehkan: http://www.youtube.com/watch?v=-abcdefghijk

Sumber https://www.dte.web.id/