# Video Background: volledige gids

> Video Background voegt full-screen video-herosecties toe aan de homepage en de categoriepagina's van PrestaShop 8 en 9. De video wordt op uw eigen server gehost en afgespeeld door de native…

- Pagina: <https://www.datafirefly.com/nl/documentation/dfvideobackground/>
- Taal: nl
- Bijgewerkt op: 2026-09-16
- Andere talen: [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), [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)
- Index: <https://www.datafirefly.com/nl/documentation/llms.txt>

Video Background voegt full-screen video-herosecties toe aan de homepage en de categoriepagina's van PrestaShop 8 en 9. De video wordt op uw eigen server gehost en afgespeeld door de native HTML5-videotag: geen enkele aanroep van YouTube of Vimeo, geen cookies van derden, niets toe te voegen aan uw toestemmingsbanner. De module bevat lazy loading via IntersectionObserver, een terugvalafbeelding op mobiel en een meertalige overlay (titel, ondertitel, knop).

## Installatie

1. Open in de PrestaShop back-office **Modules > Modulebeheer** en klik op **Een module installeren**.
2. Selecteer het bestand `dfvideobackground.zip` en bevestig.
3. Klik op **Configureren**: u komt direct op de lijst met videosecties.

De module installeert zonder enige override van de core of het thema. Ze registreert de hooks `displayHome`, `displayContentWrapperTop` en `displayHeader`, maakt twee SQL-tabellen aan en een map `uploads/` die tegen PHP-uitvoering is beschermd.

## Uw eerste videosectie aanmaken

1. Klik op **Een videosectie toevoegen**.
2. Vul een **interne naam** in (nooit op de front getoond).
3. Kies de **locatie**: Homepage of Categoriepagina. Selecteer voor een categorie deze in de boomstructuur.
4. Upload uw **MP4-video** (verplicht) en, als u die hebt, de **WebM**-variant (met voorrang geserveerd omdat ze lichter is).
5. Voeg een **posterafbeelding** toe (getoond vóór het laden van de video) en een **mobiele terugvalafbeelding**. Zonder mobiele afbeelding wordt de poster gebruikt.
6. Voer de **titel**, de **ondertitel**, het **label** en de **link van de knop** in voor elke taal van de winkel.
7. Sla op: de sectie is direct online als ze actief is.

U kunt zoveel secties aanmaken als nodig — één per categorie, meerdere op de homepage — en ze via slepen en neerzetten herordenen in de kolom Positie van de lijst.

## Een geoptimaliseerde video voorbereiden

De gouden regel: een korte lus (10 tot 20 seconden), stil, zonder audiospoor, van minder dan 5 MB. Met ffmpeg:

```
# MP4 H.264, 1280px breed, zonder audio, geoptimaliseerd voor streaming
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero.mp4

# WebM VP9-variant (optioneel, lichter)
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero.webm
```

De maximale uploadgrootte is standaard 64 MB (configuratie `DFVB_MAX_VIDEO_MB`) maar blijft beperkt door de PHP-directives `upload_max_filesize` en `post_max_size` van uw server.

## Referentie van de instellingen

### Uiterlijk

- **Hoogte**: waarde + eenheid (vh of px). Standaard 60 vh.
- **Kleur en dekking van de overlay**: gekleurde laag over de video om de leesbaarheid van de tekst te garanderen (standaard zwart op 35%).
- **Tekstkleur** en **uitlijning van de inhoud** (links / midden / rechts).

### Afspelen

- **Autoplay**: automatisch afspelen, altijd gedempt (browservereiste).
- **Lus**: herstart de video continu.
- **Bedieningselementen tonen**: toont de native spelerbediening (standaard uitgeschakeld voor een "background"-weergave).

### Prestaties

- **Uitgesteld laden**: de video wordt pas gedownload wanneer de sectie de viewport nadert (marge van 200 px). Aanbevolen.
- **Mobiel breekpunt**: onder deze breedte (standaard 768 px) vervangt de terugvalafbeelding de video en wordt het videobestand nooit gedownload.

## Frontgedrag: lazy loading, mobiel, toegankelijkheid

- Op desktop worden de videobronnen bij het naderen van de viewport geïnjecteerd en start het afspelen; het pauzeert automatisch wanneer de sectie uit beeld verdwijnt (besparing van batterij en bandbreedte).
- Op mobiel (onder het breekpunt) wordt alleen de terugvalafbeelding getoond: nul videobytes verstuurd, uw mobiele Core Web Vitals blijven behouden.
- Heeft de bezoeker `prefers-reduced-motion` geactiveerd, dan wordt de autoplay-video niet gedownload: de posterafbeelding blijft getoond.
- Het frontscript weegt ongeveer 4 kB, in vanilla JavaScript, zonder jQuery.

## AVG

In tegenstelling tot een YouTube- of Vimeo-embed wordt de video vanaf uw eigen domein geserveerd: er wordt geen enkele cookie geplaatst, geen enkel gegeven aan een derde doorgegeven, geen enkel extern verzoek verstuurd. U hoeft voor deze module dus niets toe te voegen aan uw toestemmingsbanner of aan uw verwerkingsregister.

## Multistore en meertalig

- Elke sectie is gekoppeld aan de winkel van de context waarin ze is aangemaakt; in single-store context wordt de lijst automatisch gefilterd.
- Titel, ondertitel, knoplabel, link en alternatieve tekst van de afbeelding voert u in voor elke actieve taal, direct in het formulier.

## Probleemoplossing

- **De video verschijnt niet op een categorie**: controleer of uw thema de hook `displayContentWrapperTop` in zijn layout bevat (aanwezig in alle op Classic gebaseerde thema's) en of de sectie actief is en aan de juiste categorie gekoppeld.
- **De video start niet automatisch**: autoplay vereist een gedempte video — de module dwingt deze instelling af, maar sommige browsers blokkeren autoplay in energiebesparingsmodus; de posterafbeelding blijft dan getoond.
- **Fout bij het uploaden**: controleer de extensie (mp4, webm, jpg, png, webp), de PHP-limiet `upload_max_filesize` en de rechten van de map `modules/dfvideobackground/uploads/`.
- **De video verschijnt op mobiel**: controleer de breekpuntwaarde van de sectie; de terugvalafbeelding geldt alleen onder deze breedte.

## Deïnstallatie

Het deïnstalleren verwijdert de SQL-tabellen van de module, de geüploade bestanden in de map uploads en het beheertabblad. Exporteer vooraf uw video's als u ze wilt bewaren.