quarta-feira, 23 de novembro de 2016

Responsive Vimeo Lazy Loading com Jquery

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.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner