YouTube Video Showcase - Slider responsive, lightbox y miniaturas automáticas

Tus videos ya están hechos. Ponlos en la tienda.

Demostraciones de producto, unboxings, tutoriales, videos de marca — el trabajo ya está hecho y los videos están en YouTube. Lo que suele faltar es una forma decente de mostrarlos en la tienda: algo que no obligue a subir miniaturas a mano, que no envíe al cliente a YouTube en plena visita y que no arrastre una librería de slider y una copia de jQuery a cada página.

Pega un enlace. Esa es toda la configuración.

Copia cualquier dirección de YouTube — desde la barra del navegador o desde el botón Compartir —, ponle un título al video, pega el enlace y guarda. En cuanto se reconoce el enlace, el formulario Añadir un video te muestra la miniatura obtenida directamente de YouTube y una marca verde con el ID del video detectado, de modo que ves que ha entendido el enlace antes de confirmar. Sin subir imágenes y sin clave API.

Se acepta cualquier formato de enlace: youtube.com/watch?v=…, la forma corta youtu.be/…, los Shorts, los enlaces embed, los enlaces de directos e incluso un ID de video de 11 caracteres a secas. Lo que no se acepta son los enlaces de listas de reproducción o de canal, porque ninguno de los dos identifica un video concreto — y el formulario te lo dice en lugar de guardar algo roto.

El video se reproduce en tu página, no en la de YouTube

Al hacer clic en una miniatura, el video se abre en un lightbox sin distracciones sobre tu tienda, y se cierra con un clic o con la tecla Escape. Utiliza el reproductor sin cookies de privacidad mejorada de YouTube, así que el visitante que nunca reproduce un video tampoco es rastreado por él.

Un slider que se adapta solo a las pantallas pequeñas

Elige cuántos videos van en una fila en escritorio: de uno a ocho. Esa cifra es un máximo, no una cantidad fija: por debajo de 992 px el módulo la limita a cuatro, por debajo de 768 px a tres y por debajo de 576 px a dos, con deslizamiento táctil nativo. No tienes que configurar ningún breakpoint, y no acabas con una fila de ocho sellos de correos en el móvil.

Las flechas y los puntos de navegación son opcionales, y ambos se ocultan automáticamente cuando todos los videos ya caben en pantalla — nada de flechas muertas junto a un slider que no tiene nada que deslizar.

Una reproducción automática que sabe cuándo parar

La reproducción automática avanza por los videos según el tiempo que definas, y se detiene cuando debe: mientras el cursor del visitante está sobre el slider, mientras un video se está reproduciendo en el lightbox y mientras la pestaña del navegador está en segundo plano. Un slider que sigue avanzando detrás del video que alguien está viendo es peor que no tener reproducción automática.

Una lista de videos que de verdad puedes gestionar

La lista Tus videos te da flechas arriba y abajo para ordenar, una insignia Visible en la que haces clic para ocultar o mostrar un video, y editar o eliminar en cada fila. Cualquier video puede limitarse a un solo idioma de la tienda o mostrarse a todo el mundo — muy útil cuando el tutorial en alemán no debería aparecer en la tienda francesa. Un video cuyo idioma se ha eliminado después de la tienda se marca como Idioma eliminado y deja de mostrarse, en lugar de desaparecer en silencio sin explicación.

Tan ligero que no se nota

Un archivo CSS pequeño y un archivo JavaScript pequeño, que se cargan solo cuando hay algo que mostrar. Sin jQuery, sin slick, sin colorbox y sin nada descargado de un CDN. Los recursos del front office llevan control de caché por versión del módulo, así que una actualización llega a los visitantes recurrentes sin pedirle a nadie que vacíe la caché del navegador.

Cada diapositiva es un enlace real al video que el JavaScript convierte después en lightbox — así, si el JavaScript falla o está desactivado, las miniaturas siguen funcionando como enlaces normales en lugar de quedarse como imágenes muertas.

Colócalo donde quieras

Por defecto el slider se sitúa en la página de inicio mediante displayHome. Muévelo o cópialo a cualquier otro hook de visualización desde Diseño → Posiciones, o insértalo directamente en una plantilla de tu tema con {widget name='youtubeslider'}.

Qué corrigieron las versiones 2.0.x

La versión 1.x cargaba jQuery dos veces desde un CDN, su página de configuración fallaba por completo en las versiones modernas de PrestaShop, recargar la página después de guardar duplicaba los videos y una URL vacía producía una diapositiva gris rota. Todo eso ha desaparecido por diseño: el módulo ya no usa jQuery en absoluto, cada guardado se valida y se redirige, y un video no puede guardarse sin un enlace de YouTube válido.

La línea 2.0.x corrigió después tres problemas reales con los temas: el slider ocupando todo el ancho del navegador en zonas de inicio de borde a borde como las de Hummingbird (ahora se limita al ancho de contenido del tema y se centra), la barra de desplazamiento horizontal que provocaba su flecha siguiente y un desbordamiento en móvil en zonas de hook con CSS Grid, donde el contenedor se dimensionaba según su contenido sin desplazar en lugar de según el viewport. La versión 2.0.2 corrigió además una actualización que podía desactivar el módulo cuando el registro de un solo hook devolvía false.

Compatibilidad

PrestaShop 1.7, 8 y 9, en ocho idiomas: alemán, español, francés, inglés, italiano, neerlandés, polaco y turco. Funciona con cualquier tema, sin jQuery y sin librerías externas. Al actualizar desde 1.x tus videos migran automáticamente — los IDs se extraen de las URLs guardadas, y cualquier diapositiva antigua guardada sin una URL válida se conserva pero se marca como Oculto para que puedas corregirla en lugar de perderla. Al desinstalar se eliminan la tabla y los ajustes del módulo; tus videos en YouTube, por supuesto, quedan intactos.

Preguntas frecuentes

¿Necesito una clave API de YouTube?

No. Las miniaturas vienen directamente de las propias direcciones de imagen de YouTube, así que no hay nada que registrar ni ninguna cuota que agotar.

¿Qué formatos de enlace funcionan?

Todos los habituales: watch?v=, youtu.be, Shorts, enlaces embed y de directo, o un ID de video a secas. Los enlaces de listas de reproducción y de canal no funcionan, porque no identifican un video concreto.

¿El visitante sale de mi tienda para ver el video?

No. El video se abre en un lightbox sobre tu página, con el reproductor sin cookies de YouTube, y se cierra con un clic o con la tecla Escape.

¿Cómo se comporta en el móvil?

Reduce por sí solo los videos por fila — limitados a cuatro por debajo de 992 px, tres por debajo de 768 px y dos por debajo de 576 px — y admite el deslizamiento táctil nativo. Tu ajuste es el máximo de escritorio; no hay ningún breakpoint que tengas que configurar.

¿Puedo mostrar videos distintos en idiomas distintos?

Sí. Cada video se limita a un idioma de la tienda o se muestra en todos ellos.

Mi miniatura es un marcador de posición gris. Esa es la imagen que sirve YouTube para un video privado, eliminado o recién subido. Comprueba que el video sea público y accesible.

Un video no se reproduce en el lightbox. Su propietario ha desactivado la inserción en YouTube. Es una restricción del lado de YouTube, y el lightbox muestra el mensaje del propio YouTube cuando ocurre.

¿Puedo sacar el slider de la página de inicio?

Sí, desde Diseño → Posiciones a cualquier hook de visualización, o con {widget name='youtubeslider'} en cualquier parte de tu tema.