[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla # SIS VideoGrid: módulo Joomla 4 que muestra vídeos de Youtube [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net) 14 Junio 2023 [Extensiones](https://sergioiglesias.net/blog/extensiones) 2 - 3 minutos Visitas: 1049 - - [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-joomla) - [ Extensiones Joomla ](https://sergioiglesias.net/etiquetas/extensiones-joomla) - [ Joomla4 ](https://sergioiglesias.net/etiquetas/joomla4) ![](https://sergioiglesias.net/images/blog/extensiones/sis-videogrid-joomla4.webp#joomlaImage://local-images/blog/extensiones/sis-videogrid-joomla4.webp?width=1320&height=600) Hoy te traigo un **nuevo módulo para Joomla 4** en el que he estado trabajando para un proyecto web y con el que podrás presentar vídeos de Youtube en formato Grid de Bootstrap 5. SIS VideoGrid: módulo #Joomla 4 que muestra vídeos de Youtube - #Joomla4 #MejorConJoomla [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/extensiones/sis-videogrid-modulo-joomla-4-que-muestra-videos-de-youtube "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fsis-videogrid-modulo-joomla-4-que-muestra-videos-de-youtube&text=SIS%20VideoGrid%3A%20m%C3%B3dulo%20%23Joomla%204%20que%20muestra%20v%C3%ADdeos%20de%20Youtube%20-%20%23Joomla4%20%23MejorConJoomla "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=SIS%20VideoGrid%3A%20m%C3%B3dulo%20%23Joomla%204%20que%20muestra%20v%C3%ADdeos%20de%20Youtube%20-%20%23Joomla4%20%23MejorConJoomla%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fsis-videogrid-modulo-joomla-4-que-muestra-videos-de-youtube "Envíalo") ## Por qué desarrollar este módulo para Joomla 4 He estado trabajando en un pequeño proyecto que tendrá una **página web creada con Joomla 4** y en la que, en la portada, habrá varios vídeos de Youtube. Después de tratar el tema de diseño, decidimos que necesitábamos mostrar los vídeos de una determinada manera: - Un vídeo embebido nada más cargar la web. - Varias capturas de vídeos en la parte lateral derecha. Dicho y hecho. Aquí te dejo una captura de cómo se mostraría este módulo: ![sis videogrid demo](https://sergioiglesias.net/media/cached-resp-images//images/blog/extensiones/sis-videogrid-demo_1230.png?version=6a3e097671cc56168bd71abcea6391d5) Como puedes ver, cumple con los necesidades marcadas. - Las capturas están todas en la parte lateral derecha. - Hay una captura por cada vídeo quedando como "activa" la que se está visualizando y el resto como "no activas". - Hay un efecto de scroll para mostrar todas las capturas. Además, un par de datos importantes: 1. El primero es que **no usa jQuery**. Utiliza Vanilla Javascript. De esta forma, evitamos dependencias de esta librería. 2. El segundo es que he añadido una visualización más para mostrar las capturas justo debajo del vídeo. ## Funcionamiento de SIS VideoGrid Los pasos que tienes que seguir son los siguientes: 1. Descargar el módulo de [mi página web](https://sergioiglesias.net/extensiones-joomla/modulos-joomla/sis-videogrid) o de [mi sitio de GitHub](https://sergiois.github.io/sis-videogrid.html). 2. Instalarlo de la forma habitual en Joomla. En este artículo tienes más información: [Cómo instalar una extensión en Joomla](https://sergioiglesias.net/blog/extensiones/468-como-instalar-una-extension-en-joomla-varias-formas). 3. Ir al módulo y configurarlo. 4. Habilitar el módulo en la posición que hayas elegido de la plantilla y listo. ## Cómo configurar SIS VideoGrid ![sis videogrid configuración](https://sergioiglesias.net/media/cached-resp-images//images/blog/extensiones/sis_videogrid_1_1230.png?version=cd7ce46c9cf8f1bdc9884205e4d25d06) Tal y como puedes ver en la captura anterior tienes un campo para seleccionar el tipo de visualización y luego la opción de añadir tantas capturas/vídeos como necesites. Por cada vídeo tenes que introducir su captura y su ID. --- Así de sencilla es la configuración y así de sencillo es utilizar este **módulo para Joomla 4** que muestra vídeos de YouTube en formato Grid de Bootstrap 5. Tienes una demo de los 2 tipos de visualización en mi página de extensiones: [Demo SIS VideoGrid](https://extensiones.sergioiglesias.net/modulos-joomla/sis-videogrid) Puedes descargarlo desde mi página web: [Descargar SIS VideoGrid](https://sergioiglesias.net/extensiones-joomla/modulos-joomla/sis-videogrid) Espero que te haya gustado y te ayude en tus proyectos. Si necesitas algún módulo a medida no dudes en [contactar conmigo](https://sergioiglesias.net/contacto), estaré encantado en escuchar tus necesidades y ayudarte en tu web. SIS VideoGrid: módulo #Joomla 4 que muestra vídeos de Youtube - #Joomla4 #MejorConJoomla [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/extensiones/sis-videogrid-modulo-joomla-4-que-muestra-videos-de-youtube "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fsis-videogrid-modulo-joomla-4-que-muestra-videos-de-youtube&text=SIS%20VideoGrid%3A%20m%C3%B3dulo%20%23Joomla%204%20que%20muestra%20v%C3%ADdeos%20de%20Youtube%20-%20%23Joomla4%20%23MejorConJoomla "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=SIS%20VideoGrid%3A%20m%C3%B3dulo%20%23Joomla%204%20que%20muestra%20v%C3%ADdeos%20de%20Youtube%20-%20%23Joomla4%20%23MejorConJoomla%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fsis-videogrid-modulo-joomla-4-que-muestra-videos-de-youtube "Envíalo") Puedes poner en los comentarios mejoras que harías. [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado ### ¿No sabes bien en qué estado está tu web Joomla? Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden. Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML [ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables [![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS. [](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias") ### Suscríbete a mi newsletter ¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo. Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**. [Quiero apuntarme!](https://sergioiglesias.net/newsletter) ### No hay comentarios ### Deja tu comentario En respuesta a Some User Nombre \* Dirección de email \* Texto del comentario \* Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*