YouTube Lazy Loader

Ide ini sebenarnya Saya ambil dari sebuah artikel - Lazy Load YouTube Videos. Tapi Saya pikir kodenya terlalu panjang. Dan prosedurnya juga terlalu rumit. Berikut ini adalah 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 seperti ini maka jQuery akan mengubah mereka semua menjadi video (dalam versi palsu pada saat pertama, dan akan berubah menjadi video asli setelah diklik):

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

Lihat Demo

Cara kerjanya sangat sederhana. jQuery akan mencari semua tautan yang memiliki 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 dia 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 sampai sejauh ini, hingga saat seorang pengunjung (penonton) mengeklik video palsu yang kita buat, maka video palsu tersebut akan berubah 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

• Gambar:
• yt-bar-center.png
• yt-bar-left.png (1)
• yt-bar-left.png (2)
• yt-bar-right.png
• yt-play.png