Video Background — Guía completa

Video Background añade secciones hero de vídeo a pantalla completa en la portada y las páginas de categoría de PrestaShop 8 y 9. El vídeo se autoaloja en su servidor y se reproduce con la etiqueta vídeo HTML5 nativa: sin llamadas a YouTube o Vimeo, sin cookies de terceros, nada que añadir a su banner de consentimiento. El módulo incluye lazy loading con IntersectionObserver, una imagen de respaldo móvil y un overlay multilingüe (título, subtítulo, botón).

Instalación

1. En el back office de PrestaShop, abra Módulos > Gestor de módulos y haga clic en Subir un módulo.
2. Seleccione el archivo dfvideobackground.zip y confirme.
3. Haga clic en Configurar: llegará directamente a la lista de secciones de vídeo.

Crear su primera sección de vídeo

1. Haga clic en Añadir una sección de vídeo.
2. Introduzca un nombre interno (nunca se muestra en el front office).
3. Elija la ubicación: Portada o Página de categoría. Para una categoría, selecciónela en el árbol.
4. Suba su vídeo MP4 (obligatorio) y, si dispone de ella, la variante WebM (servida primero por ser más ligera).
5. Añada una imagen póster (mostrada antes de la carga del vídeo) y una imagen de respaldo móvil. Sin imagen móvil, se usa el póster.
6. Introduzca el título, el subtítulo, la etiqueta y el enlace del botón en cada idioma de la tienda.
7. Guarde: la sección se publica inmediatamente si está activa.

Preparar un vídeo optimizado

La regla de oro: un bucle corto (10 a 20 segundos), mudo, sin pista de audio, de menos de 5 MB. Con ffmpeg:

# MP4 H.264, 1280px de ancho, sin audio, optimizado para streaming
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero.mp4

# Variante WebM VP9 (opcional, más ligera)
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero.webm

Referencia de ajustes

Apariencia

• Altura: valor + unidad (vh o px). 60 vh por defecto.
• Color y opacidad de la superposición: velo de color sobre el vídeo para garantizar la legibilidad del texto (negro al 35 % por defecto).
• Color del texto y alineación del contenido (izquierda / centro / derecha).

Reproducción

• Autoplay: reproducción automática, siempre muda (exigencia de los navegadores).
• Bucle: reinicia el vídeo continuamente.
• Mostrar controles: muestra los controles nativos del reproductor (desactivado por defecto para un efecto de fondo).

Rendimiento

• Carga diferida: el vídeo solo se descarga cuando la sección se acerca al viewport (margen de 200 px). Recomendado.
• Breakpoint móvil: por debajo de este ancho (768 px por defecto), la imagen de respaldo sustituye al vídeo y el archivo de vídeo nunca se descarga.

Comportamiento en el front: lazy loading, móvil, accesibilidad

• En escritorio, las fuentes de vídeo se inyectan cuando la sección se acerca al viewport y comienza la reproducción; se pausa automáticamente cuando la sección sale de la pantalla (ahorro de batería y de banda).
• En móvil (por debajo del breakpoint), solo se muestra la imagen de respaldo: cero bytes de vídeo transferidos, sus Core Web Vitals móviles permanecen intactos.
• Si el visitante ha activado prefers-reduced-motion, el vídeo en autoplay no se descarga: la imagen póster permanece visible.
• El script del front pesa unos 4 KB de JavaScript vanilla, sin jQuery.

RGPD

A diferencia de un embed de YouTube o Vimeo, el vídeo se sirve desde su propio dominio: no se instala ninguna cookie, no se transmite ningún dato a terceros, no se emite ninguna petición externa. Por tanto, no hay nada que añadir a su banner de consentimiento ni a su registro de tratamientos para este módulo.

Multitienda y multilingüe

• Cada sección se asocia a la tienda del contexto en el que fue creada; en contexto de tienda única, la lista se filtra automáticamente.
• El título, el subtítulo, la etiqueta del botón, el enlace y el texto alternativo de la imagen se introducen en cada idioma activo, directamente en el formulario.

Resolución de problemas

• El vídeo no aparece en una categoría: compruebe que su tema incluye el hook displayContentWrapperTop en su layout (presente en todos los temas basados en Classic) y que la sección está activa y asociada a la categoría correcta.
• El vídeo no se reproduce automáticamente: el autoplay exige un vídeo mudo — el módulo lo fuerza, pero algunos navegadores bloquean el autoplay en modo de ahorro de energía; en ese caso la imagen póster permanece visible.
• Error al subir: compruebe la extensión (mp4, webm, jpg, png, webp), el límite PHP upload_max_filesize y los permisos del directorio modules/dfvideobackground/uploads/.
• El vídeo se muestra en móvil: verifique el valor del breakpoint de la sección; la imagen de respaldo solo se aplica por debajo de ese ancho.

Desinstalación

La desinstalación elimina las tablas SQL del módulo, los archivos subidos al directorio uploads y la pestaña de administración. Exporte sus vídeos previamente si desea conservarlos.