# Video Background — Komplette Anleitung

> Video Background fügt der Startseite und den Kategorieseiten von PrestaShop 8 und 9 bildschirmfüllende Video-Hero-Sektionen hinzu. Das Video wird auf Ihrem Server selbst gehostet und über das native HTML5-Video-Tag abgespielt:…

- Seite: <https://www.datafirefly.com/de/documentation/dfvideobackground/>
- Sprache: de
- Aktualisiert am: 2026-07-16
- Weitere Sprachen: [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), [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)
- Index: <https://www.datafirefly.com/de/documentation/llms.txt>

Video Background fügt der Startseite und den Kategorieseiten von PrestaShop 8 und 9 bildschirmfüllende Video-Hero-Sektionen hinzu. Das Video wird auf Ihrem Server selbst gehostet und über das native HTML5-Video-Tag abgespielt: kein YouTube- oder Vimeo-Aufruf, keine Drittanbieter-Cookies, nichts für Ihr Consent-Banner. Das Modul bringt Lazy Loading per IntersectionObserver, ein mobiles Fallback-Bild und ein mehrsprachiges Overlay (Titel, Untertitel, Button) mit.

## Installation

1. Öffnen Sie im PrestaShop-Backoffice **Module > Modul-Manager** und klicken Sie auf **Modul hochladen**.
2. Wählen Sie die Datei `dfvideobackground.zip` aus und bestätigen Sie.
3. Klicken Sie auf **Konfigurieren**: Sie gelangen direkt zur Liste der Video-Sektionen.

Das Modul wird ohne Core- oder Theme-Override installiert. Es registriert die Hooks `displayHome`, `displayContentWrapperTop` und `displayHeader`, erstellt zwei SQL-Tabellen und ein gegen PHP-Ausführung geschütztes Verzeichnis `uploads/`.

## Ihre erste Video-Sektion anlegen

1. Klicken Sie auf **Neue Video-Sektion hinzufügen**.
2. Vergeben Sie einen **internen Namen** (wird nie im Frontend angezeigt).
3. Wählen Sie die **Platzierung**: Startseite oder Kategorieseite. Für eine Kategorie wählen Sie diese im Baum aus.
4. Laden Sie Ihr **MP4-Video** hoch (erforderlich) und, falls vorhanden, die **WebM**-Variante (wird zuerst ausgeliefert, da leichter).
5. Fügen Sie ein **Posterbild** (wird vor dem Laden des Videos angezeigt) und ein **mobiles Fallback-Bild** hinzu. Ohne Mobilbild wird das Poster verwendet.
6. Geben Sie **Titel**, **Untertitel**, **Button-Beschriftung** und **Button-Link** in jeder Shop-Sprache ein.
7. Speichern: Die Sektion ist sofort online, wenn sie aktiv ist.

Erstellen Sie beliebig viele Sektionen — eine pro Kategorie, mehrere auf der Startseite — und ordnen Sie sie per Drag-and-drop in der Spalte Position der Liste neu an.

## Ein optimiertes Video vorbereiten

Die goldene Regel: ein kurzer Loop (10 bis 20 Sekunden), stumm, ohne Audiospur, unter 5 MB. Mit ffmpeg:

```
# H.264-MP4, 1280px breit, ohne Audio, streaming-optimiert
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero.mp4

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

Die maximale Upload-Größe beträgt standardmäßig 64 MB (Konfiguration `DFVB_MAX_VIDEO_MB`), bleibt aber durch die PHP-Direktiven `upload_max_filesize` und `post_max_size` Ihres Servers begrenzt.

## Einstellungsreferenz

### Darstellung

- **Höhe**: Wert + Einheit (vh oder px). Standard: 60 vh.
- **Farbe und Deckkraft des Overlays**: farbiger Schleier über dem Video für gut lesbaren Text (standardmäßig Schwarz mit 35 %).
- **Textfarbe** und **Inhaltsausrichtung** (links / zentriert / rechts).

### Wiedergabe

- **Autoplay**: automatische Wiedergabe, immer stumm (Browser-Anforderung).
- **Schleife**: startet das Video fortlaufend neu.
- **Bedienelemente anzeigen**: zeigt die nativen Player-Steuerelemente (standardmäßig deaktiviert für den Hintergrund-Look).

### Performance

- **Lazy Loading**: Das Video wird erst heruntergeladen, wenn sich die Sektion dem Viewport nähert (200 px Rand). Empfohlen.
- **Mobiler Breakpoint**: Unterhalb dieser Breite (standardmäßig 768 px) ersetzt das Fallback-Bild das Video, und die Videodatei wird nie heruntergeladen.

## Frontend-Verhalten: Lazy Loading, Mobil, Barrierefreiheit

- Auf dem Desktop werden die Videoquellen injiziert, sobald sich die Sektion dem Viewport nähert, dann startet die Wiedergabe; sie pausiert automatisch, wenn die Sektion den Bildschirm verlässt (Akku- und Bandbreitenersparnis).
- Auf Mobilgeräten (unterhalb des Breakpoints) wird nur das Fallback-Bild angezeigt: null Video-Bytes übertragen, Ihre mobilen Core Web Vitals bleiben intakt.
- Hat der Besucher `prefers-reduced-motion` aktiviert, wird das Autoplay-Video nicht heruntergeladen: Das Posterbild bleibt sichtbar.
- Das Frontend-Skript wiegt rund 4 KB Vanilla-JavaScript, ohne jQuery.

## DSGVO

Im Gegensatz zu einem YouTube- oder Vimeo-Embed wird das Video von Ihrer eigenen Domain ausgeliefert: Es wird kein Cookie gesetzt, keine Daten an Dritte übertragen, keine externe Anfrage gestellt. Für dieses Modul müssen Sie daher weder Ihr Consent-Banner noch Ihr Verarbeitungsverzeichnis ergänzen.

## Multistore und Mehrsprachigkeit

- Jede Sektion ist dem Shop-Kontext zugeordnet, in dem sie erstellt wurde; im Einzelshop-Kontext wird die Liste automatisch gefiltert.
- Titel, Untertitel, Button-Beschriftung, Link und Alt-Text des Bildes werden in jeder aktiven Sprache direkt im Formular gepflegt.

## Fehlerbehebung

- **Das Video erscheint nicht auf einer Kategorie**: Prüfen Sie, ob Ihr Theme den Hook `displayContentWrapperTop` im Layout enthält (in allen Classic-basierten Themes vorhanden) und ob die Sektion aktiv und der richtigen Kategorie zugeordnet ist.
- **Das Video startet nicht automatisch**: Autoplay erfordert ein stummes Video — das Modul erzwingt dies, aber manche Browser blockieren Autoplay im Energiesparmodus; das Posterbild bleibt dann sichtbar.
- **Fehler beim Hochladen**: Prüfen Sie die Endung (mp4, webm, jpg, png, webp), das PHP-Limit `upload_max_filesize` und die Berechtigungen des Verzeichnisses `modules/dfvideobackground/uploads/`.
- **Das Video wird auf Mobilgeräten angezeigt**: Kontrollieren Sie den Breakpoint-Wert der Sektion; das Fallback-Bild greift nur unterhalb dieser Breite.

## Deinstallation

Die Deinstallation entfernt die SQL-Tabellen des Moduls, die in das Uploads-Verzeichnis hochgeladenen Dateien und den Admin-Tab. Exportieren Sie Ihre Videos vorher, wenn Sie sie behalten möchten.