Este plugin te permite insertar videos de YouTube agregando una lista de IDs en el campo de texto. Los módulos no cargan los videos hasta que el usuario hace clic en ellos, por lo que no ralentizan la carga de la página.
Inicializar
Tan solo debes insertar el siguiente código en donde quieras mostrar los videos. Puedes ubicarlo en cualquier parte siempre que puedas escribir código HTML, tambien puedes crear multiples listas de videos si duplicas el codigo en donde lo necesites:
<div class="ytube">
EKLWC93nvAU
ppMXtTbNnCs
</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
Solo tienes que agregar los IDs de los videos que deseas mostrar. Debes agregar un ID por línea, sin espacios ni comas. Para obtener el ID de un video, copia el texto que aparece después de v=, por ejemplo:
https://www.youtube.com/watch?v=XXXXXXXXXXXEn este caso el ID es XXXXXXXXXXX. Luego de agregar los IDs y guardar los cambios, los módulos de video se mostrarán en el orden en el que los agregaste dentro del <div> contenedor.
Personalizar
Para personalizar el aspecto del widget, he dejado algunas variables css que puedes especificar con un nuevo valor, para ello dirígete a la sección Temas > Personalizar > Avanzado > Añadir CSS y pega el siguiente código:
.ytube {
--yt-gap: 1rem;
--yt-icon-color: #fff;
--yt-icon-size: 3rem;
--yt-min-width: 280px;
}Podrás cambiar el tamaño del icono, el color y el espacio entre cada módulo. Si tienes conocimientos de CSS puedes realizar una modificación mas profunda utilizando las siguientes clases:
.ytube {} /* Contenedor */
.ytube-item {} /* Modulo de video */
.ytube-embed {} /* Iframe */
.ytube-play {} /* Boton play */
.ytube-thumbnail {} /* Miniatura */Podrás cambiar el tamaño del icono, el color y el espacio entre cada módulo.
Conclusión
Con este plugin podrás agregar videos de YouTube a tu blog y que estos no carguen hasta que el usuario los solicite. Espero que te sea de utilidad y si tienes alguna duda, puedes dejarla en los comentarios.
