Responsive Vimeo Lazy Loading with Jquery

• Today we'll show you responsive lazy loading vimeo by kangismet it has a charging power is amazing for anyone who uses that platform and you want to share videos on Blogger that just have to win then follow the steps below to add:
  Installing the Jquery Framework
  
  .
  Log in to Blogger va in the menu template then edit HTML
  with the combination keys CTRL+F search for </head> and above it copy and paste the code:

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

Then save this script above the </body> or </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> 

By adding the CSS:

Above ]]></b:skin> save the code

 .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/AVvXsEhKBMf1H_JbJ67WiPdBZIo_oEbQBEacBXFlec46UqPvpQr-jc2PiJLNpfcIFHH2K7bYpWsYZrewhqcQkL15Ewk7Y4I8Pegc863roDRxmM8R8QNjURmEjSX6iGmLudoflSDgz32OB9doa4A/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/AVvXsEh6fBgNzdx2uVJluaeldGAv6YYpZgVPhKhwo4el0q8bHbS17OrBSbEKSiiBKRQ4Hs54h2QMgj1HpRDVTxoh2_9MJklTUNtg55Rv-XPvFTxA75LpwUrn7x4fwnrEOmDkwYtFGIIRHmg-Jbo/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/AVvXsEjtAH-NtupTnvKJwAGTxq_Epx-YbRQEuDtFAcMNFOfzpSf56scQU90glkRfpYb0ddt9VqERMUI5r3QWZnACD6gcTBiJglLl8XdyHlPpiiAOWV19-tv5VIcIu832su5lKaEp9zvf9ovVUec/s1600/vimeo-bar.png') repeat-x top left;
}
.vm-box .vm-bar:before {
    content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHyIklrsHwcy5PSoELHYTn4oqRN-fF-CnoivVH5Pl_LFB1lPO_TXocd_rSFNXwYVsFal2dPi0_dSHv-i91hiwSl4TtR29RPUa3W5uvCg9bh8mahrnmtENCI13zb8U1AQ6-KHzz6FGz3h8/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/AVvXsEhldpvQ_pvjXDQJcGM3-Omaj-FUCqyD6i4J66HdfRdqmrqYdS5evoyBU4eIGWEAcT-KLvhq1kRdPygqittKq5VoUNPAu7VAS7gwPaxad3cEPjYXzHKXLvkBbTwWvOjUzECJ6o1aLOzMNmg/s1600/vimeo-bar-right.png');
    width: 114px;
    height: 32px;
    top: 0;
    right: -114px;
    position: absolute;
} 

then save it

In the post next to type click on the tab HTML and paste the following code

 <a class="vimeo-link" href="https://vimeo.com/id video" rel="nofollow">Title of the video</a>

 

Note: The highlighted in yellow change this for the id video and Title of the video.