Hintergrundvideo in WordPress einbinden
Ein Video als Hintergrund im Header wirkt, solange es schnell lädt und den Text nicht unlesbar macht. Diese Anleitung zeigt, wie Sie es über Theme, Page Builder oder Plugin einrichten und wie Sie Dateigröße und Mobilansicht in den Griff bekommen.
Was ein Hintergrundvideo leisten muss
Ein Video hinter der Überschrift ersetzt das statische Headerbild. Es läuft stumm, in einer Schleife und ohne Bedienelemente, meist über die volle Breite und Höhe des Bildschirms. Besucher sollen es wahrnehmen, ohne dass es die Aufmerksamkeit vom Text wegzieht.
Damit das funktioniert, muss das Material dazu passen. Ruhige Kamerafahrten und gleichmäßige Bewegungen wirken, harte Schnitte und Sprechszenen stören. Fünf bis fünfzehn Sekunden reichen fast immer, weil die Schleife sowieso von vorn beginnt.
Der zweite Punkt ist die Lesbarkeit. Über dem Video liegt in der Regel eine halbtransparente Fläche, damit die Schrift Kontrast bekommt. Ohne dieses Overlay wird die Überschrift auf hellen Stellen des Videos unlesbar.
Vor der Einrichtung klären
Dateigröße
Das Video startet vor allem anderen. Jedes Megabyte verzögert den ersten Eindruck der Seite.
Mobilansicht
Auf dem Smartphone gehört meist ein Standbild statt des Videos. Das spart Datenvolumen und Akku.
Stumm und ohne Regler
Ton ist bei einem Hintergrundvideo tabu. Browser starten es sonst gar nicht erst.
Drei Wege zum Video-Header
Weg 1: Die Funktion des Themes
Viele Themes bringen einen Video-Header mit. Sie finden die Einstellung unter Design > Customizer im Bereich für Kopfbereich oder Titelbild. Dort laden Sie entweder eine MP4-Datei hoch oder tragen eine YouTube-Adresse ein. WordPress selbst unterstützt diese Funktion, ob sie verfügbar ist, entscheidet allerdings das Theme.
Das ist der sauberste Weg, weil nichts zusätzlich installiert wird. Der Nachteil: Sie sind an das gebunden, was das Theme anbietet, und ein Themewechsel nimmt den Header mit.
Weg 2: Der Page Builder
Arbeiten Sie mit einem Page Builder, liegt die Einstellung im Zeilen- oder Abschnittselement. Bei Elementor öffnen Sie die Sektion, wechseln auf „Stil“ und wählen beim Hintergrundtyp die Video-Option. Dort tragen Sie eine Datei oder eine YouTube-Adresse ein und setzen Start- und Endzeit sowie das Ersatzbild für Mobilgeräte.
Andere Builder handhaben es ähnlich. Der Vorteil liegt darin, dass Sie das Video nicht nur im Header einsetzen können, sondern in jedem Abschnitt der Seite.
Weg 3: Ein Plugin
Bringt weder Theme noch Builder die Funktion mit, füllt ein Plugin die Lücke. Solche Erweiterungen legen ein Video hinter einen frei wählbaren Bereich und bringen meist gleich die Optionen für Overlay, Ersatzbild und Mobilverhalten mit. Prüfen Sie vorher, wie viel das Plugin im Frontend nachlädt und ob es das auch auf Seiten ohne Hintergrundvideo tut.
Welche Kriterien bei der Auswahl zählen, steht bei den WordPress Video-Plugins.
Eigene Datei oder YouTube?
Eine selbst gehostete MP4-Datei ist die schnellere Variante. Der Browser holt genau eine Datei von Ihrem Server, ohne Player-Skript und ohne Verbindung zu einem fremden Dienst. Für kurze Schleifen ist das die richtige Wahl.
Ein YouTube-Video als Hintergrund spart Ihnen Speicherplatz, bringt aber zwei Probleme mit. Das Player-Skript ist schwer, und die Verbindung zu Google macht eine Einwilligung nötig. Ein Hintergrundvideo, das erst nach dem Klick auf einen Cookie-Banner erscheint, verfehlt seinen Zweck.
Praktische Empfehlung: Für den Header eine eigene, gut komprimierte Datei. Wie Sie sie in die Mediathek bekommen und dabei am Upload-Limit vorbeikommen, steht unter Video in WordPress hochladen.
Die richtige Dateigröße
Ein Hintergrundvideo lädt, bevor der Besucher irgendetwas gesehen hat. Es konkurriert damit direkt mit dem ersten Bildaufbau. Diese Werte haben sich in der Praxis bewährt:
- Länge: fünf bis fünfzehn Sekunden, danach beginnt die Schleife.
- Auflösung: 1920 Pixel Breite genügen. Größeres Material bringt sichtbar nichts, kostet aber Datenvolumen.
- Format: MP4 mit H.264. Eine zusätzliche WebM-Variante kann kleiner ausfallen, wenn Ihr Theme mehrere Quellen unterstützt.
- Tonspur: beim Export komplett entfernen. Sie wird ohnehin nicht abgespielt und macht die Datei größer.
Wenn die Datei nach dem Export noch zu groß ist, kürzen Sie zuerst die Laufzeit und senken danach die Bitrate. Beides bringt mehr als jede Feineinstellung im Codec.
Mobil, Overlay und Barrierefreiheit
Auf dem Smartphone lieber ein Bild
Mobile Verbindungen und Datentarife vertragen kein automatisch startendes Hintergrundvideo. Die meisten Themes und Builder bieten deshalb ein Ersatzbild für kleine Bildschirme an. Nutzen Sie es. Wählen Sie als Standbild ein Einzelbild aus dem Video, dann bleibt der Eindruck derselbe.
Fehlt diese Option, greift oft ohnehin eine Bremse: iOS und Android spielen Videos nur unter bestimmten Bedingungen automatisch ab, und Nutzer mit aktiviertem Datensparmodus sehen das Video gar nicht. Ein Standbild als Fallback ist deshalb Pflicht, kein Extra.
Das Overlay über dem Video
Damit die Schrift lesbar bleibt, legen Sie eine halbtransparente Farbfläche über das Video. Dunkles Overlay bei heller Schrift, helles bei dunkler Schrift. Fangen Sie bei etwa vierzig Prozent Deckkraft an und passen Sie an, bis der Text auch an der hellsten Stelle des Videos gut lesbar ist.
An bewegungsempfindliche Nutzer denken
Dauerhaft laufende Bewegung ist für manche Menschen unangenehm bis auslösend. Gute Themes und Builder respektieren die Systemeinstellung für reduzierte Bewegung und zeigen dann das Standbild. Prüfen Sie, ob Ihre Lösung das tut, und verzichten Sie im Zweifel auf schnelle Schnitte.
Wenn das Hintergrundvideo nicht läuft
- Es bleibt schwarz oder zeigt nur das Standbild: Der Browser hat den automatischen Start blockiert. Prüfen Sie, ob die Stummschaltung wirklich aktiv ist, ohne sie läuft nichts.
- Der Header lädt spürbar länger: Datei zu groß. Laufzeit kürzen, Auflösung auf 1920 Pixel begrenzen, Tonspur entfernen.
- Das Video ist beschnitten oder verzerrt: Der Bereich hat ein anderes Seitenverhältnis als das Video. Wichtige Bildinhalte gehören in die Mitte, weil die Ränder je nach Bildschirm wegfallen.
- Auf dem Handy passiert nichts: Normalverhalten. Hinterlegen Sie ein Ersatzbild statt gegen die Browser zu arbeiten.
- Die Schrift ist stellenweise unlesbar: Overlay fehlt oder ist zu schwach. Deckkraft erhöhen.
Häufige Fragen
Über den Customizer, sofern Ihr Theme einen Video-Header anbietet. Sie finden die Einstellung unter Design und dort im Bereich für Kopfbereich oder Titelbild. Alternativ übernimmt der Page Builder die Aufgabe, wenn Sie mit einem arbeiten.
So klein wie möglich, weil es vor allem anderen lädt. Fünf bis fünfzehn Sekunden Laufzeit bei 1920 Pixel Breite und ohne Tonspur sind ein guter Ausgangspunkt. Prüfen Sie das Ergebnis auf dem Smartphone über das Mobilfunknetz.
Technisch ja, viele Themes und Builder unterstützen das. Praktisch sprechen zwei Punkte dagegen: Das Player-Skript ist schwer, und die Verbindung zu Google macht eine Einwilligung nötig. Ein Header, der erst nach Zustimmung erscheint, verfehlt seinen Zweck. Eine eigene MP4-Datei ist die bessere Wahl.
Mobile Browser starten Videos nur unter engen Bedingungen automatisch, und im Datensparmodus gar nicht. Das ist gewolltes Verhalten und lässt sich nicht umgehen. Hinterlegen Sie ein Standbild als Ersatz für kleine Bildschirme.
Nicht das Video selbst, wohl aber eine langsame Seite. Google bewertet Ladezeit und Stabilität des Seitenaufbaus. Ein schweres Video im Header trifft genau diese Werte, weil es den ersten sichtbaren Bildaufbau verzögert. Mit kleiner Datei und Standbild für Mobilgeräte bleibt der Effekt beherrschbar.
Weiterlesen
Überblick
Alle drei Wege im Vergleich: einbetten, hochladen oder per Plugin.
Video-Header ohne Ladezeit-Problem
Wir richten Hintergrundvideo, Overlay und Mobilansicht so ein, dass der Header wirkt und die Ladezeit stimmt.