Responsive Vimeo Lazy Loading com Jquery

- 12:40:00
vimeo responsive lazy loading com Jquery

Hoje vamos mostrar responsive lazy loading vimeo by kangismet isso tem um poder de carregamento incrivel para quem usa essa plataforma e deseja compartilhar videos no Blogger isso só tem a ganhar então siga os passos abaixo para adicionar:

Instalando o Framework Jquery

Faça login no Blogger va no menu modelo então editar HTML 
com as teclas combinadas CTRL+F busque por </head> e acima disso copie e cole o código:

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

Então salve esse script acima de </body> ou </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>

Adicionando o CSS: 

Acima de ]]></b:skin> salve o código 

.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('http://2.bp.blogspot.com/-LIzdxbEoLCI/ViZMG3ldCnI/AAAAAAAAHAI/Bw_BUuO4FZY/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('http://4.bp.blogspot.com/-qYDgI2UGOh0/ViZYL4AQeGI/AAAAAAAAHAY/NPNmlH4vTHE/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('http://2.bp.blogspot.com/-vNdJbb99DgI/ViZg1NdfbmI/AAAAAAAAHAs/-ySKxa_GU_Y/s1600/vimeo-bar.png') repeat-x top left;
}
.vm-box .vm-bar:before {
    content: url('http://2.bp.blogspot.com/-BMpSPlX-Wws/ViZg0xpuQGI/AAAAAAAAHAo/HXlrxl_EyUs/s1600/vimeo-bar-left.png');
    width: 11px;
    height: 32px;
    top: 0;
    left: -11px;
    position: absolute;
}
.vm-box .vm-bar:after {
    content: url('http://3.bp.blogspot.com/-ZZFiRodA9oQ/ViZg1CoKUFI/AAAAAAAAHAw/khokPgMvFj8/s1600/vimeo-bar-right.png');
    width: 114px;
    height: 32px;
    top: 0;
    right: -114px;
    position: absolute;
}

então salve isso 

No post ao lado de escrever clique na aba HTML e cole o seguinte código


<a class="vimeo-link" href="https://vimeo.com/iddovideo" rel="nofollow">Titulo do video</a>

Note: O realçado em amarelo mude isso por o id do video e o titulo do video.
.


EmoticonEmoticon

 

Start typing and press Enter to search