Blog Kang Ismet

Adding responsive Youtube Lazy Load to any site - 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.

Sebetulnya ini hanya pembaharuan dari artikel sebelumnya (Baca : Manipulasi untuk mempercepat loding video Youtube). Hanya saja pada artikel tersebut video belum responsive. Saya buat responsive sesuai dengan perkembangan zaman.

Beberapa keuntungan Youtube Lazy Load :

• Lebih cepat diload
• Custom Title / Judul bisa dibuat sesuka hati, sebelum video ditampilkan.
• Valid HTML5
• Lebih SEO Friendly
• Responsive

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 Kang Ismet
$(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('http://1.bp.blogspot.com/-QtFxtA8Fmp8/ViUWz6Dt3SI/AAAAAAAAG_M/0Kk29wYynsU/s1600/gradient.png') repeat-x top left;
}
.youtube-box .youtube-title {
  background: transparent url('http://3.bp.blogspot.com/-pp7s5v5KeBI/ViUW0EI5ClI/AAAAAAAAG_Q/vRLq1Oet22Q/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('http://4.bp.blogspot.com/-Vj3xOT3Jiis/ViPsv-_82rI/AAAAAAAAG-Q/3jc6mgYR5f4/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> 

Bagi sobat yang menginginkan tampilan dengan tab, seperti screenshoot di bawah, caranya sama seperti diatas, hanya saja ganti Script dan CSS.



Semoga bermanfaat...