Adding responsive Youtube Lazy Load to any site

INFO KIE - Youtube Lazy Load merupakan manipulasi tampilan Youtube sebenarnya. Yang ditampilkan hanyalah button, bar, dan icon palsu yang dimanipulasi oleh image.

Hal ini tentunya menguntungkan, yang diload sementara hanyalah thumbnail video saja, selebihnya hanyalah hasil manipulasi, sehingga akan lebih ringan. Video akan ditampilkan setelah gambar / image tersebut diklik. Kurang lebih seperti itu lah konsepnya.
Beberapa keuntungan Youtube Lazy Load :

·         Lebih cepat diload

·         Custom Title / Judul bisa dibuat sesuka hati, sebelum video ditampilkan.

·         Valid HTML5

·         Lebih SEO Friendly

·         Responsive

Yups, inilah tampilan video hasil manipulasi (silahkan coba klik play).

Apabila sobat tertarik memasangnya, silahkan ikuti langkah mudahnya :

1. Pasang Framework jQuery diatas </head>, abaikan langkah ini apabila sudah ada

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

2. Simpan script ini diatas </body> atau di atas </head>

<script type='text/javascript'>

//<![CDATA[

// Original Script by DTE :]

// Optimized and Modified by Althafa

$(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"><img class="youtube-img" src="http://img.youtube.com/vi/' + yt_id + '/0.jpg" alt="youtube" ></img><span class="gradient"></span><span class="youtube-title">' + yt_title + '</span><span class="youtube-play"></span></div>');

        $('div.youtube-box').click(function() {

            $(this).replaceWith('<div class="youtube-frame"><div class="videoWrapper"><iframe src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>');

        });

    });

});

//]]>

</script>

3. Simpan CSS diatas ]]</b:skin>

.youtube-box {

    text-align:center;

    background-color: black;

    width: 640px;

    max-width: 100%;

    margin: 0 auto;

    overflow: hidden;

    position: relative;

}

.youtube-frame {

    background-color: black;

    width: 640px;

    height: auto;

    max-width: 100%;

    text-align: center;

    margin: 0 auto;

}

.youtube-img {

    position: relative;

    height: 100%;

    width: 100%;

    margin-top: -7%;

    margin-bottom: -8.5%;

    transform: scale(1.1);

}

.youtube-box span {

  display:block;

  position:absolute;

  top:0px;

  right:0px;

  bottom:0px;

  left:0px;

}

.youtube-box .gradient {

    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMQzQMOKgnBCFYI7bIjiVFeR9bI0RmM1y2mEPhC0BeJPXmJiiuIPjLlQ1vtaOh_ZR7khtfE1jb5QazfVI-jVq8sFAzTGEEzlA0we4Hs4Ch8tCTyGFu72IX-wNh8WxXzjSlYRkShTWzQY/s1600/gradient.png') repeat-x top left;

}

.youtube-box .youtube-title {

  background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB9YaWSLynt0o-o_fAMGocrqojkyh-4dI8YTCHE23MTcwwjerncBR81kkHQoyfSfpRo9XHKW4gRhskryIAa8zedkefyF4Jj-q4ARh6MAcovBzw1pNkSTwYR8jsr5lfOeseShhBQ23l_l8/s1600/t-title-bg.png') no-repeat 98% 50%;

  font:normal 19px Arial,Sans-Serif;

  color:white;

  text-shadow:0px 1px 2px black;

  bottom:auto;

  line-height:40px;

  height:40px;

  overflow:hidden;

  padding:0px 15px;

  text-align: left;

}

.youtube-box .youtube-play {

  cursor:pointer;

  width:74px;

  height:52px;

  top:50%;

  left:50%;

  margin:-26px 0px 0px -40px;

  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGOSIxe8eqZfAUTXAofBhITdW1zj4OALExV82azcdcVDM-YRdGpsy5EfnzTh4pqyTAHBwqmjEJ6IySDcSIdzFsvqtvFpJQsHNIVNtJ014d1iwUJcDK6qKKR18NWjGbyryTNJZc3fMcs0/s1600/yt-play-new.png') no-repeat top left;

}

.youtube-box .youtube-play:hover {

  background-position:bottom left;

}

.videoWrapper {

    position: relative;

    padding-bottom: 56.25%; /* 16:9 */

    padding-top: 25px;

    height: 0;

}

.videoWrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

Untuk menggunakannya, ganti url Youtube dan Judul dengan video yang ingin di tampilkan :

<a class="youtube-link" href="https://www.youtube.com/watch?v=CevxZvSJLk8" rel="nofollow">Katy Perry - Roar</a>