Widget videos de Vimeo lazy load para Blogger

Lista de videos

Demostración Video

Qué tal amigo, nuevamente les comparto otro complemento. He desarrollado este widget como respuesta a un pedido que recibí en el anterior aporte.


El widget genera una lista de videos de Vimeo, también basado en el widget Lista de enlaces, mas la ayuda de un script muy pequeño escrito en vanilla js. Básicamente es igual que mi anterior aporte solo que con Vimeo en lugar de Youtube.


Instalar

Ve a la edición html y busca la etiqueta section que corresponde al sidebar, si no sabes como encontrarla te recomiendo ver el video de instalación, una vez encontrado agrega el siguiente codigo dentro del section:


<b:widget id='LinkList81' locked='false' title='Vimeo List' type='LinkList' version='1'>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
         <div class='vimeo--items'>
         <b:loop values='data:links' var='link'>
            <div class='card--vimeo'>
            <div class='card--vimeo__img card--global' data-ratio='16:9' data-vendor='vimeo' expr:data-src='"https://vimeo.com/" + data:link.target'>
               <span class='card--vimeo__title'><data:link.name/></span>
            </div>
            </div>
         </b:loop>
         </div>
      </div>
   </b:includable>
</b:widget>

Ahora busca </head> y arriba de eso pega el siguiente codigo css:


<style type='text/css'>/*<![CDATA[*/
/*! vimeo list 1.0.1 */
.vimeo--items,.vimeo--items *,.vimeo--items ::after,.vimeo--items ::before{box-sizing:border-box}.card--vimeo__img embed,.card--vimeo__img iframe,.card--vimeo__img video{margin:0;padding:0;border:0;outline:0;z-index:15}.vimeo--items{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -.5rem}.card--vimeo{padding:0 .5rem;max-width:380px;width:100%}.card--vimeo__img{margin-bottom:1rem;display:block;position:relative;cursor:pointer;width:100%;padding-bottom:56.28%;background-size:cover;box-shadow:0 1px 1px rgba(0,0,0,.5),0 0 transparent;background-position:center;border-radius:3px;overflow:hidden;background-color:#171717;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.card--vimeo__img embed,.card--vimeo__img iframe,.card--vimeo__img video{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0}.card--vimeo__img img{width:100%}.card--vimeo__img::after,.card--vimeo__img::before{content:"";position:absolute}.card--vimeo__img::before{width:100%;height:100%;left:0;top:0;background-image:-webkit-linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,.9));background-image:linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,.9));opacity:.8;-webkit-transition:opacity .3s;transition:opacity .3s}.card--vimeo__img:hover::before{opacity:1}.card--vimeo__img::after{width:45px;height:35px;bottom:.6rem;left:.6rem;background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAZElEQVQ4y+3SMRGDUBAE0E9DiYAoCBqiAhWJC1ARXMTE94AD+rQ0PDRsQQXbv5nbmy3lTil+Hhng76NJAFR9BthM2gTA4pUBdrMuAbAaTgS7b3JSVHozJm+tnsk03sk00vFdIQd836pPRlQhUgAAAABJRU5ErkJggg==);background-position:center;background-color:rgba(0,0,0,.75);border-radius:4px;-webkit-transition:background .5s;transition:background .5s}.card--vimeo__img:hover::after{background-color:#03A9F4}.card--vimeo__title{position:absolute;right:0;bottom:0;font-weight:700;color:#fff;padding:0 1rem 1rem;margin-left:calc(48px + .5rem)}
/*]]>*/</style>

Por último busca </body> y arriba de eso pega el siguiente codigo javascript. Nota: Si en tu blog tienes el widget Lista de videos de youtube entonces este paso ya no es necesario.


<script src='//cdn.rawgit.com/viktorbergehall/lazyframe/master/dist/lazyframe.min.js'></script>
<script>//<![CDATA[
lazyframe('.card--global');
//]]></script>

Y listo, ya puedes encontrar el complemento en la sección "Diseño" bajo el nombre "Vimeo List". El widget no será visible hasta que no agregues al menos un video a la lista.


Agregar videos

Necesitas buscar los videos de vimeo que quieras agregar, una vez encontrados copia la ID que se encuentra en la url, ejemplo:


https://vimeo.com/[ID_VIDEO]

Con el fin de que resulte mas claro, imaginemos que quiero compartir el siguiente video mediante el widget, la url completa es la siguiente:


https://vimeo.com/223878276

Por lo tanto la ID es 223878276. Ahora editamos el widget Vimeo List. En el campo "URL" pegamos la ID y en "Nombre" escribimos el título del vídeo, finalmente nos quedaría de esta manera:


captura-vimeo-list-01

Seguido de esto presiona el botón "Añadir enlace" y guardar los cambios. Este proceso lo puedes repetir para incluir más vídeos en la lista.



Si estas interesado en el código css y javascript, te facilito el repositorio del autor y un gist con los estilos sin comprimir que escribí para este complemento.


Repositorio vimeo-list.css

Eso es todo, si tienes alguna duda dejala en los comentarios, respondo a todos. Si te ha servido este aporte no olvides compartir, eso me ayudaria mucho, gracias por pasar.