# 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… - Pagina: - Lingua: it - Aggiornato il: 2026-07-16 - Altre lingue: [fr](https://www.datafirefly.com/documentation/dfvideobackground/index.md), [en](https://www.datafirefly.com/en/documentation/dfvideobackground/index.md), [es](https://www.datafirefly.com/es/documentation/dfvideobackground/index.md), [de](https://www.datafirefly.com/de/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) - Indice: 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. Il modulo si installa senza alcun override del core o del tema. Registra gli hook `displayHome`, `displayContentWrapperTop` e `displayHeader`, crea due tabelle SQL e una directory `uploads/` protetta contro l'esecuzione di PHP. ## 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. Create tutte le sezioni necessarie — una per categoria, più di una sulla homepage — e riordinatele con il drag and drop nella colonna Posizione dell'elenco. ## 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 ``` La dimensione massima di caricamento è di 64 MB di default (configurazione `DFVB_MAX_VIDEO_MB`), ma resta limitata dalle direttive PHP `upload_max_filesize` e `post_max_size` del vostro server. ## 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.