# 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…

- Página: <https://www.datafirefly.com/es/documentation/dfvideobackground/>
- Idioma: es
- Actualizado el: 2026-07-16
- Otros idiomas: [fr](https://www.datafirefly.com/documentation/dfvideobackground/index.md), [en](https://www.datafirefly.com/en/documentation/dfvideobackground/index.md), [de](https://www.datafirefly.com/de/documentation/dfvideobackground/index.md), [it](https://www.datafirefly.com/it/documentation/dfvideobackground/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfvideobackground/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfvideobackground/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfvideobackground/index.md)
- Índice: <https://www.datafirefly.com/es/documentation/llms.txt>

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.

El módulo se instala sin ningún override del núcleo ni del tema. Registra los hooks `displayHome`, `displayContentWrapperTop` y `displayHeader`, crea dos tablas SQL y un directorio `uploads/` protegido contra la ejecución de PHP.

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

Cree tantas secciones como necesite — una por categoría, varias en la portada — y reordénelas arrastrando y soltando en la columna Posición de la lista.

## 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
```

El tamaño máximo de subida es de 64 MB por defecto (configuración `DFVB_MAX_VIDEO_MB`), pero sigue limitado por las directivas PHP `upload_max_filesize` y `post_max_size` de su servidor.

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