Ein Video, das sich per Klick in einem Fenster über der Seite öffnet, spart Platz und lenkt weniger ab als ein dauerhaft eingebettetes Video. Das nennt man Lightbox. In Divi 5 gibt es dafür keinen fertigen Schalter am Video-Modul. Es gibt aber einen Weg ganz ohne Code, und der ist neu: die Interaktionen.
Vorab, was sich geändert hat: Die Lightbox, die Divi bei einigen Modulen mitbringt, funktioniert nur für Bilder. Beim Bild-Modul steht in der Gruppe „Link“ der Schalter „Mit Lightbox Öffnen“, und Divi schreibt dazu, dass die darunter eingetragene Link-URL dann ignoriert wird. Ein Video lässt sich so also nicht öffnen. Elegant Themes beschreibt für andere Module in einem Hilfeartikel einen Weg mit eigenem CSS und JavaScript. Hier zeige ich die Lösung mit den eingebauten Interaktionen. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Das Prinzip
Wir bauen kein echtes Lightbox-Plugin nach, sondern ein Overlay, das du ein- und ausblendest:
- Eine eigene Sektion enthält das Video und einen „Schließen“-Button.
- Diese Sektion liegt „fest“ über der Seite und füllt den Bildschirm. Beim Laden der Seite wird sie ausgeblendet.
- Ein Button an anderer Stelle blendet sie bei Klick ein, der „Schließen“-Button blendet sie wieder aus.
Dieses Vorgehen entspricht dem Pop-up-Beispiel in der Elegant-Themes-Hilfe zu Interaktionen. Jede Interaktion besteht aus Auslöser, Effekt und Ziel.
Schritt 1: Die Sektion mit dem Video anlegen
Lege unter deinem Inhalt eine zweite Sektion an. Füge dort ein Video-Modul ein. Divi setzt ein Beispielvideo ein, das du in der Gruppe „Video“ (Feld „Video-MP4-Datei Oder Youtube-URL“) durch deine eigene YouTube-Adresse oder eine MP4-Datei ersetzt.
Gib der Sektion jetzt einen Namen, denn nach diesem Namen suchst du später das Ziel der Interaktionen. Öffne die Sektionseinstellungen, dort die Gruppe „Meta“, und trag bei „Elementbeschriftung“ etwa „Video-Lightbox“ ein. In der Zielauswahl erscheint sie dann als „Sektion (Video-Lightbox)“.
Die Elementbeschriftung macht die Sektion später auffindbar.Schritt 2: Anzeigen-Button einrichten
Dein Auslöser kann ein Button-Modul in der oberen Sektion sein. Als Link trägst du # ein. Öffne die Einstellungen des Buttons, wechsle in den Reiter „Erweitert“, öffne „Interaktionen“ und klick auf „Interaktion Hinzufügen“. Zuerst wählst du den Auslöser, in der Liste stehen „Klick“, „Mauszeiger Eintritt“, „Maus Verlassen“, „Viewport Betreten“, „Viewport Verlassen“, „Laden“, „Breakpoint Betreten“ und „Breakpoint Verlassen“. Nimm „Klick“.
Im Fenster „Interaktion Bearbeiten“ stellst du ein:
- Effekt-Aktion: „Element Anzeigen“. Zur Auswahl stehen außerdem unter anderem „Sichtbarkeit Umschalten“, „Element Ausblenden“ und „Zu Element Scrollen“.
- Zielmodul: „Sektion (Video-Lightbox)“.
Klick auf den Button zeigt die Sektion „Video-Lightbox“.Schritt 3: Schließen-Button
Füge in der Video-Sektion unter dem Video ein weiteres Button-Modul ein, Button-Text „Schließen“, Link-URL #. Lege wie eben eine Interaktion an: Auslöser „Klick“, Effekt „Element Ausblenden“, Zielmodul wieder „Sektion (Video-Lightbox)“.
Wichtig für die Reihenfolge: Bau die Interaktion für den Anzeigen-Button, bevor du die Sektion über die Seite legst. Danach verdeckt sie im Builder die Elemente darunter, und der Button lässt sich schlecht anwählen.
Schritt 4: Die Sektion zum Overlay machen
Hintergrund: Öffne die Sektionseinstellungen, Reiter „Inhalt“, Gruppe „Hintergrund“. Klick auf „Hintergrundfarbe“, trag im Feld „Farbe Auswählen“ einen dunklen Wert wie 111111 ein und bestätige mit Enter. Rechts daneben stellst du die Deckkraft in Prozent ein.
Dunkler Hintergrund mit leichter TransparenzGröße: Im Reiter „Design“ öffnest du „Größe einstellen“ und trägst bei „Breite“ 100% und bei „Mindesthöhe“ 100vh ein, damit die Sektion den ganzen Bildschirm füllt.
Position: Im Reiter „Erweitert“ steckt die Position in der Gruppe „Arbeitsstelle“ (eine unglückliche Übersetzung von „Position“). Stell das Feld „Position“ von „Relativ“ auf „Fest“, lass den „Versatz-Ursprung“ oben links und die Versätze auf 0. Beim „Z-Index“ trägst du einen hohen Wert ein, zum Beispiel 999999.
Position „Fest“ legt die Sektion über die Seite.Schritt 5: Beim Laden ausblenden
Damit die Sektion nicht dauernd sichtbar ist, bekommt sie selbst eine Interaktion: Reiter „Erweitert“, „Interaktionen“, „Interaktion Hinzufügen“, Auslöser „Laden“, Effekt „Element Ausblenden“, Zielmodul „Sektion (Video-Lightbox)“, also sie selbst.
Beim Laden der Seite verschwindet das Overlay.Speichern, und die Seite im normalen Fenster öffnen.
Das Ergebnis
Auf der Seite ist nur der Anzeigen-Button zu sehen. Beim Laden war die Sektion in meinem Test unsichtbar.
Vor dem Klick: nur der Button.Nach dem Klick auf „Video ansehen“ legt sich das Overlay über die Seite, mit Video und „Schließen“-Button. Ein Klick auf „Schließen“ blendet es wieder aus.
Nach dem Klick: das Overlay mit Video (Vorschaubild unkenntlich gemacht).Stolperfallen
- Header bleibt sichtbar: In meinem Test blieb die Kopfzeile des Themes über dem Overlay stehen, obwohl der Z-Index hoch war. Wenn dich das stört, musst du den Header gezielt ausblenden, das habe ich nicht weiter verfolgt.
- Video läuft weiter? Ich habe mit einer eigenen MP4-Datei geprüft, was beim Schließen passiert: Das Video lief nach „Schließen“ nicht weiter, es stand auf Pause. Bei eingebetteten YouTube-Videos habe ich das nicht geprüft. Probier es mit Ton aus, bevor du die Seite veröffentlichst.
- Nur ein Weg zum Schließen: Ich habe nur den Button eingerichtet. Ob ein Klick neben das Video oder die Esc-Taste das Overlay schließt, habe ich nicht eingebaut.
- Handy: Prüf das Overlay auf dem Smartphone, besonders die Höhe und ob der „Schließen“-Button sichtbar bleibt.
Häufige Fragen
Gibt es das auch fertig als Plugin?
Ja, mehrere Zusatzplugins bringen eine fertige Lightbox oder Popups mit. Mehr dazu in der Übersicht zu Popups in Divi 5. Für ein einzelnes Video lohnt sich dagegen oft die Lösung mit Interaktionen.
Kann ich damit auch andere Inhalte öffnen?
Ja, das Overlay ist eine normale Sektion. Du kannst dort statt des Videos ein Formular, Text oder Bilder einsetzen.
Mehr zu Divi bekommst du direkt bei Elegant Themes (Werbung).
