Video Background — Guida completa

Video Background aggiunge sezioni hero video a schermo intero alla homepage e alle pagine categoria di PrestaShop 8 e 9. Il video è auto-ospitato sul vostro server e riprodotto dal tag video HTML5 nativo: nessuna chiamata a YouTube o Vimeo, nessun cookie di terze parti, nulla da aggiungere al banner di consenso. Il modulo include il lazy loading con IntersectionObserver, un’immagine di fallback per mobile e un overlay multilingue (titolo, sottotitolo, pulsante).

Installazione

1. Nel back office di PrestaShop, aprite Moduli > Gestore moduli e cliccate su Carica un modulo.
2. Selezionate il file dfvideobackground.zip e confermate.
3. Cliccate su Configura: arrivate direttamente all’elenco delle sezioni video.

Creare la prima sezione video

1. Cliccate su Aggiungi una sezione video.
2. Inserite un nome interno (mai mostrato sul front office).
3. Scegliete il posizionamento: Homepage o Pagina categoria. Per una categoria, selezionatela nell’albero.
4. Caricate il video MP4 (obbligatorio) e, se disponibile, la variante WebM (servita per prima perché più leggera).
5. Aggiungete un’immagine poster (mostrata prima del caricamento del video) e un’immagine di fallback mobile. Senza immagine mobile, viene usato il poster.
6. Inserite titolo, sottotitolo, etichetta e link del pulsante in ogni lingua del negozio.
7. Salvate: la sezione è subito online se è attiva.

Preparare un video ottimizzato

La regola d’oro: un loop breve (da 10 a 20 secondi), muto, senza traccia audio, sotto i 5 MB. Con ffmpeg:

# MP4 H.264, largo 1280px, senza audio, ottimizzato per lo streaming
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero.mp4

# Variante WebM VP9 (opzionale, più leggera)
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero.webm

Riferimento delle impostazioni

Aspetto

• Altezza: valore + unità (vh o px). 60 vh di default.
• Colore e opacità dell’overlay: velo colorato sopra il video per garantire la leggibilità del testo (nero al 35% di default).
• Colore del testo e allineamento dei contenuti (sinistra / centro / destra).

Riproduzione

• Autoplay: riproduzione automatica, sempre muta (requisito dei browser).
• Loop: riavvia il video in continuo.
• Mostra i controlli: visualizza i controlli nativi del player (disattivato di default per un effetto sfondo).

Prestazioni

• Caricamento differito: il video viene scaricato solo quando la sezione si avvicina al viewport (margine di 200 px). Consigliato.
• Breakpoint mobile: sotto questa larghezza (768 px di default), l’immagine di fallback sostituisce il video e il file video non viene mai scaricato.

Comportamento sul front: lazy loading, mobile, accessibilità

• Su desktop, le sorgenti video vengono iniettate quando la sezione si avvicina al viewport, poi parte la riproduzione; si mette automaticamente in pausa quando la sezione esce dallo schermo (risparmio di batteria e banda).
• Su mobile (sotto il breakpoint), viene mostrata solo l’immagine di fallback: zero byte video trasferiti, i vostri Core Web Vitals mobili restano intatti.
• Se il visitatore ha attivato prefers-reduced-motion, il video in autoplay non viene scaricato: l’immagine poster resta visibile.
• Lo script front pesa circa 4 KB di JavaScript vanilla, senza jQuery.

GDPR

A differenza di un embed YouTube o Vimeo, il video è servito dal vostro dominio: nessun cookie viene installato, nessun dato viene trasmesso a terzi, nessuna richiesta esterna viene emessa. Per questo modulo non c’è quindi nulla da aggiungere al banner di consenso né al registro dei trattamenti.

Multinegozio e multilingue

• Ogni sezione è associata al negozio del contesto in cui è stata creata; in contesto mono-negozio, l’elenco viene filtrato automaticamente.
• Titolo, sottotitolo, etichetta del pulsante, link e testo alternativo dell’immagine si inseriscono in ogni lingua attiva, direttamente nel form.

Risoluzione dei problemi

• Il video non appare su una categoria: verificate che il tema includa l’hook displayContentWrapperTop nel layout (presente in tutti i temi basati su Classic) e che la sezione sia attiva e associata alla categoria giusta.
• Il video non parte automaticamente: l’autoplay richiede un video muto — il modulo lo impone, ma alcuni browser bloccano l’autoplay in modalità risparmio energetico; in tal caso resta visibile l’immagine poster.
• Errore al caricamento: verificate l’estensione (mp4, webm, jpg, png, webp), il limite PHP upload_max_filesize e i permessi della directory modules/dfvideobackground/uploads/.
• Il video appare su mobile: controllate il valore del breakpoint della sezione; l’immagine di fallback si applica solo sotto quella larghezza.

Disinstallazione

La disinstallazione elimina le tabelle SQL del modulo, i file caricati nella directory uploads e la scheda di amministrazione. Esportate prima i vostri video se desiderate conservarli.