Responsive Vimeo Lazy Load with jQuery

Responsive Vimeo Lazy Load with jQuery -  Salah satu penyedia situs Video online selain Youtube adalah Vimeo, walaupun banyak pengguna yang belum tahu keberadaan Vimeo. Saya pribadi lebih memilih Youtube dibanding Vimeo.

Kekuranag Vimeo menurut saya pribadi agak lebih lambat di load. Tetapi kita bisa mengakalinya dengan Vimeo Video Lazy Load. Konsepnya masih sama seperti sebelumnya, memanipulasi video, ikon, bar, dll dengan image.

Baca : Youtube Lazy Load

Kesulitan yang saya rasakan dalam pembuatan script ini adalah mengambil thumbnail video vimeo. Tidak seperti Youtube, url thumbnail lebih mudah di dapat. Untuk Vimeo harus menggunakan Vimeo API dan JSON tentunya.

• View on JSFiddle
• View on Codepen

Oke langsung saja simak saja cara pasang di Blogger (tentunya script ini bisa digunakan di selain platform Blogger, seperti WordPress, Joomla, dll.)

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[
// Script by Kang Ismet - blog.kangismet.net
$(function() {
    $('a.vimeo-link').each(function() {
        var vm_url   = this.href,
            vm_id    = vm_url.split('m/')[1],
            vm_title = $(this).text();        
       $(this).replaceWith('<div class="vm-box"><img class="v-thumbs" src=""/><span class="vm-title">' + vm_title + '</span><span class="vm-share-right"></span><span class="vm-play"></span><span class="vm-bar"></span></div>'); 
        $.getJSON('http://www.vimeo.com/api/v2/video/' + vm_id  + '.json?callback=?', {format: "json"}, function(data) {
    
    $(".v-thumbs").attr('src', data[0].thumbnail_large);
        $('div.vm-box').click(function() {
            $(this).replaceWith('<div class="vm-container"><iframe src="https://player.vimeo.com/video/' + vm_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div>');
            });
        });
    });
});
//]]>
</script>

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

.vm-box,
.vm-container {
    background: black;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
.vm-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
.vm-box .v-thumbs {
    width: 100%;
    height: auto;
    position: relative;
}
.vm-box .vm-title {
    cursor: pointer;
    background: rgba(0,0,0,0.7);
    font:bold 20px Arial,Sans-Serif;
    color: #00adef;
    line-height:35px;
    height:35px;
    overflow:hidden;
    padding:0px 10px;
    text-align: left;
    position: absolute;
    top: 10px;
    left: 10px;
}
.vm-box .vm-title:hover {
    color: #ff5210;
}
.vm-box .vm-share-right {
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghu2FwM0zWXouBkP2ppvIKg2G0-BwnrMlbKpdOLf3QWd8Agxc0SM14JJ2tvqfxuHxuqnmHe25tQpDX8ufb8KaIeeA_BYW7bPHNMXBZtW9DBVAwOIWfqCmXxpvh_3snAy0MoYUPPSt7H3c/s1600/vimeo-share.png') no-repeat;
    width: 47px;
    height: 129px;
    position: absolute;
    right: 0;
    top: 5px;
}
.vm-box .vm-play {
  cursor:pointer;
  width:65px;
  height:40px;
  bottom:10px;
  left: 10px;
  margin:-20px 0px 0px 0;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDnF3MlIhcejPHbIB8PmNcrGF6HMjjxkzynfy7jThyphenhypheny6q0E2Lw65Ia7EYT37VRPTEjEZLRDVoaQ5aEK4ZRs4dXPmZVJFG-f4BfnqBbG99WsEEK6Z3iws_9h3ukEp7Z2x0gjD1AQ_so3eg/s1600/vimeo-play.png') no-repeat top left;
  position: absolute;
}
.vm-box .vm-play:hover {
    background-position:bottom left;
}
.vm-box .vm-bar {
    height: 32px;
    width: calc(100% - 219px);
    position: absolute;
    bottom: 10px;
    left: 95px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNBXVyyksXqT-nPEgrldJUTT6dcL13Jp3GXlE8vhEmOR_pYiZHaHOHwFlk4XYUDH0n3bOfOcx4ydeK8U_qiOyjA-FBYU4hZOyzOXr1jGq0oqytolgv-Ss4rXALgtURDqlALfvmT0JH4U/s1600/vimeo-bar.png') repeat-x top left;
}
.vm-box .vm-bar:before {
    content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcgNFEKiBLh4Pz1M0EVbWJiQ1S6K1Yybxzu3sil9IGhEUEpTIhH9G7P49urFjQKTzW5z89wxTCwpRjhyphenhyphen_ScDvP1z9MjuaRdaGRUdfBsju30QTN_nCq_bfXzo-amrDFmaLqJaUpSKnSBUg/s1600/vimeo-bar-left.png');
    width: 11px;
    height: 32px;
    top: 0;
    left: -11px;
    position: absolute;
}
.vm-box .vm-bar:after {
    content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQt__aisGQzTq308KKWDevkDAA2lzYHbSUc6lwfWB6dW69ene1820P-Zp85Ih4MhbM8n8dmZcCG2xbXssmv_QY3GbjLGf_QY4a6sDAJhb3HyaGG5znLqVb52WAWD-3NIO-_yxO97aNmmM/s1600/vimeo-bar-right.png');
    width: 114px;
    height: 32px;
    top: 0;
    right: -114px;
    position: absolute;
}

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

<a class="vimeo-link" href="https://vimeo.com/9153533" rel="nofollow">Metallica - Fade to Black</a> 

Semoga bermanfaat...