Plugin 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.

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.

Inicializar

Deberás insertar el siguiente código en donde quieras mostrar los videos. Ubícalo en cualquier parte en donde puedas insertar código HTML, tambien puedes crear multiples listas de videos si duplicas el código donde consideres necesario:

<div class="vimeo">
  271224900
  288682266
</div>

Nota: Si ya has utilizado al menos uno de los plugins que he creado, entonces no tienes que hacer nada más y deberías ver este funcionando en tu sitio web. Si no puedes ver este plugin funcionando continúa leyendo.

Instalar Core

Este paso solo es necesario si no puedes ver el plugin funcionando. Este código esta optimizado, se mantiene actualizado y te permite usar cualquier plugin que encuentres en zkreations. Deberás ubicarlo arriba de </head> o usando cualquier metodo que tengas para insertar HTML dependiendo de tu plataforma:

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/zkreations/plugins@1/dist/css/main.min.css"/>
<script src="//cdn.jsdelivr.net/gh/zkreations/plugins@1/dist/js/main.min.js" defer></script>

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 plugin, 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;
  --vm-min-width: 280px
}

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 plugin 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.