PS PrestaShop PrestaShop Anfänger

Video Background — Komplette Anleitung

Selbst gehostete Video-Hero-Sektionen auf Startseite und Kategorien installieren und konfigurieren: Kodierung, Lazy Loading, mobiles Fallback, DSGVO.

Aktualisiert Modulversion 1.0.0

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.

War diese Seite hilfreich?

Immer noch nicht weiter? Support kontaktieren