Gadget videos de Vimeo

Inserta videos de Vimeo mediante las IDs en el campo de texto. Los videos no cargarán hasta que el usuario haga click.

<b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <style>/*<![CDATA[*/
.vimeo{display:grid;gap:var(--vm-gap,1rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}.vimeo textarea{display:none}.vimeo-item{position:relative;overflow:hidden;cursor:pointer;background-color:#000;border-radius:.5rem}.vimeo-item:before{content:"";display:block;padding-top:56.25%}.vimeo-item *{-o-object-fit:cover;object-fit:cover;position:absolute;inset:0;width:100%;height:100%;border:0 none}.vimeo-item:hover{--vm-is:1.25}.vimeo-play{stroke-width:2;stroke:var(--vm-icon-color,#fff);width:var(--vm-icon-size,4rem);transform:scale(var(--vm-is,1));transition:transform .3s;stroke-linejoin:round;fill:none;margin:auto;z-index:1}/*]]>*/</style>
    <div class="vimeo">
      <div class="vimeo-item"/>
      <textarea><data:content/></textarea>
    </div>
    <script>//<![CDATA[
      document.addEventListener("DOMContentLoaded", (event) => {
const vimeoList=(()=>{if(window.vimeoList)return;const e=document.querySelectorAll(".vimeo");async function t(e){const t=document.createElement("img");return t.classList.add("vimeo-thumbnail"),t.src=await async function(e){return fetch(`https://vimeo.com/api/v2/video/${e}.json`).then((e=>e.json())).then((e=>e[0].thumbnail_large)).catch((e=>console.error(e)))}(e),t.alt="thumbnail",t.loading="lazy",t}function n(e){const t=document.createElement("iframe");return t.classList.add("vimeo-embed"),t.src=`https://player.vimeo.com/video/${e}?autoplay=1`,t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","1"),t.setAttribute("allow","autoplay; fullscreen; picture-in-picture"),t}e.forEach((async e=>{const i=function(e){return e.querySelector("textarea").value.split("\n").map((e=>e.trim())).filter((e=>""!==e))}(e),o=document.createDocumentFragment();for(const e of i){const i=document.createElement("div"),c=await t(e);i.classList.add("vimeo-item"),i.innerHTML='<svg class="vimeo-play" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>',i.appendChild(c),i.addEventListener("click",(()=>{i.innerHTML="",i.appendChild(n(e))})),o.appendChild(i)}e.innerHTML="",e.appendChild(o)})),window.vimeoList=!0})();
      });//]]>
    </script>
  </div>
</b:includable>

Ver en CodePen

En esta ocasión he creado un gadget que te permite insertar videos de Vimeo agregando una lista de IDs de los videos deseados. Los módulos que se generan no cargan hasta que el usuario hace clic para reproducir, de esa forma no ralentizan la carga del blog.

Instalar

Para agregar el widget a tu blog, simplemente haz clic en el botón Instalar Gadget que aparece en este artículo. Luego, elige el blog en el que quieres integrarlo y automáticamente estará disponible en tu sitio. El código ha sido optimizado para asegurar que no afecte el rendimiento.

Si no utilizas Blogger como plataforma, te sugiero que revises el código fuente del widget en CodePen, lo que te permitirá adaptarlo fácilmente a tu proyecto específico.

Configurar

Agrega un ID por linea de los videos de Vimeo que deseas mostrar, sin espacios ni comas. Para obtener el ID de un video, copia el codigo de numeros que aparece después de la prmera barra /, por ejemplo:

https://vimeo.com/000000000

En este ejemplo el ID es 000000000, agrega todas las IDs de los videos que quieras mostrar y guarda los cambios, los módulos de video aparecen en orden segun la lista de IDs, por lo cual, si deseas moverlos solo debes cambiar de línea una ID.

Personalizar

Para modificar el diseño del widget, he dejado algunas variables css, las cuales puedes especificar con nuevos valores, para ello dirígete a la sección Temas > Personalizar > Avanzado > Añadir CSS y pega el siguiente código:

.vimeo {
  --vm-gap: 1rem;
  --vm-icon-color: #fff;
  --vm-icon-size: 4rem;
}

Estas variables te permiten cambiar el tamaño del icono, el color y el espacio entre cada módulo. Para una modificación mas profunda, puedes utilizar las siguientes clases:

.vimeo {} /* Contenedor */
.vimeo-item {} /* Modulo de video */
.vimeo-embed {} /* Iframe */
.vimeo-play {} /* Boton play */
.vimeo-thumbnail {} /* Miniatura */

Conclusión

Este gadget te permite insertar videos de Vimeo en tu blog, asegurando que solo se carguen cuando el usuario decida verlos. Espero que te resulte útil, y si tienes alguna pregunta, no dudes en dejarla en los comentarios.