Widget videos de Youtube lazy load para Blogger

Lista de videos

Demostración Video

Hola amigos, nuevamente aqui aportando un nuevo complemento. He desarrollado este widget como respuesta a un pedido enviado a través del formulario.


Lo que vamos a hacer es generar una lista videos de youtube en un gadget o widget. Incluir este widget nos permite integrar Youtube en Blogger. Tambien utiliza un script muy pequeño escrito en vanilla js que nos permite cargar el reproductor sólo cuando lo solicitamos, mejorando el rendimiento.


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='LinkList80' locked='false' title='Youtube 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='youtube--items'>
         <b:loop values='data:links' var='link'>
            <div class='card--youtube'>
            <div class='card--youtube__img card--global' data-vendor='youtube' expr:data-src='"https://www.youtube.com/embed/" + data:link.target'>
               <b:with value='"https://i.ytimg.com/vi/" + data:link.target + "/hqdefault.jpg"' var='youtubeImage'>
                  <img expr:alt='data:link.name' expr:src='resizeImage(data:youtubeImage,380,"16:9")'/>
               </b:with>
               <span class='card--youtube__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[*/
/*! youtube list 1.0.1 */
.youtube--items,.youtube--items *,.youtube--items ::after,.youtube--items ::before{box-sizing:border-box}.card--youtube__img embed,.card--youtube__img iframe,.card--youtube__img video{margin:0;padding:0;border:0;outline:0;z-index:15}.youtube--items{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -.5rem}.card--youtube{padding:0 .5rem}.card--youtube__img{border:4px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.2);margin-bottom:1rem;border-radius:3px;display:block;position:relative;cursor:pointer}.card--youtube__img embed,.card--youtube__img iframe,.card--youtube__img video{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0}.card--youtube__img img{width:100%}.card--youtube__img::after,.card--youtube__img::before{content:"";position:absolute}.card--youtube__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--youtube__img:hover::before{opacity:1}.card--youtube__img::after{width:48px;height:48px;bottom:.5rem;left:.5rem;background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAABl0lEQVR4Ae2XveraUBiHY4xD3URx8F+9gHZW9EKEOgi9Cz8uQFtXiwRsobvgIoLXIfYCKrqoaadCk+Xp4HiSc15PQkvB512FB37xvB/Ok/8BXDqMWXMgICIi4MCaEW1cHFOZftBgxpkkTnygbi+osiTCRIhPxUbQ5wdSAnqPCQp84VF8PKmgyA4bthQlggI7bNnimQWfSYNvEvRJyzudoMpP0nKjnCxYkgWLJEFD+6ze8wsZIS/xghk6HN7wDRnTOIHLGR33F/IVCUdyqqCDHudewqhaqmAsEwijGqqCtUwgjGqlCg4ygTCqvSoIZAJhVFdVEMkEwqjCvyiwj+gt8oiy/8j/4G86QosSjZ6BKmhn2iqaqsDllFmz+x7X7Bw+ouMejYxJ/DyoZzRwflNLGpk+WTBPnskVAtJyoaRbW3qkpWtavHzS8Mm82XlssWVDXrb82ik2vJKu7x6+RTj5xw6QHjekXOjanFBlFoSCZzWnZH8EvmbKUdNzJtQER6ChXFoMWbHnSkjIlT0rBjTJyc/Y7OspkNYf1H6eRU02jH0AAAAASUVORK5CYII=)}.card--youtube__title{position:absolute;right:0;bottom:0;font-weight:700;color:#fff;padding:0 1rem 1rem;margin-left:calc(48px + .5rem)}
/*]]>*/</style>

Por ultimo busca </body> y arriba de eso pega el siguiente codigo javascript:


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

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


Agregar videos

Solo necesitas buscar los videos de youtube que quieras agregar, Una vez encontrados copia la ID que se encuentra en la url, por lo general es todo el código que se encuentra después de ?v=, ejemplo:


https://www.youtube.com/watch?v=[ID_VIDEO]

Para ser más específicos, imaginemos que quiero compartir el siguiente video mediante el widget, la url completa es la siguiente:


https://www.youtube.com/watch?v=sNaGv5a_5U4

Por lo tanto la ID es sNaGv5a_5U4. Una vez copiada editamos el widget Youtube List. En el campo "URL" pegamos la ID y en "Nombre" escribimos el titulo del video, nos quedaría de la siguiente forma:


captura-youtube-list-01

No olvides presionar el botón "Añadir enlace" y guardar los cambios. Puedes repetir esto las veces que quieras para agregar mas videos a 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 youtube-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.