Video in Landingpage einbinden

Kurzvideo des Kunden ohne YouTube-Branding, im Format 1:1 und DSGVO-konform über EU-Hosting (Bunny Stream) auf der Landingpage einbinden. Bunny liefert einen Embed-Code, der immer auf 16:9 steht und ein paar Schwächen hat. Füge unten den Embed-Code von Bunny ein – darunter kommt der fertige, an unseren Standard angepasste Code für Elementor heraus. Wie du das Video in Bunny vorbereitest, steht Schritt für Schritt in der Anleitung darunter.

🎬 Bunny-Code → fertiger Landingpage-Code

Kompletten Embed-Code aus Bunny (unter Embed am Video) hier einfügen. Es reicht auch die reine iframe.mediadelivery.net-URL. Alle URL-Parameter werden unverändert übernommen.

Embed-Code von Bunny

Max. Breite (px) Standard: 560

✓ Fertiger Code für das HTML-Widget

Hinweis: Die Vorschau funktioniert nur, wenn diese Domain in Bunny als „Allowed Referrer" freigegeben ist. Auf der fertigen Kundenseite läuft das Video trotzdem – dort ist die Kundendomain freigegeben.

📋

So funktioniert's – die komplette Anleitung

1Video vorbereiten▸

Format: möglichst quadratisch exportieren, z. B. 1080×1080
Dateityp: MP4 oder MOV, H.264
Größe egal – Bunny transkodiert selbst. Vorkomprimieren ist nicht nötig.
Dateiname nach Schema: JJJJMMTT_Thema-Kunde-Version

2Library in Bunny anlegen▸

Pro Kunde genau eine Library – nie mehrere Kunden in eine Library.

dash.bunny.net, links auf Stream
Add Video Library
Name: Kundenname
Storage Region: Frankfurt (DE)
Replication Regions: nichts zusätzlich anhaken (kostet extra)
Erstellen

3Video hochladen▸

In die Library klicken, oben rechts Add Media
Datei hochladen, Transkodierung abwarten
Titel sauber setzen, Schema: Kundenname - Videoart
Thumbnail wählen: einen Frame nehmen, auf dem der Mund geschlossen ist, oder eigenes Bild über Upload

4Player einstellen▸

Gilt für die ganze Library – muss also nur einmal pro Kunde gemacht werden. Menü Player:

Player UI Primary Color: #FF7755

Aktivieren: Big Play Button, Play/Pause, Progress, Mute, Volume
Deaktivieren: AirPlay, Chromecast, Picture-in-Picture, Settings, Captions, 10s Backward, 10s Forward, Current Time, Duration
Full Screen: bei quadratischen Videos aus

5Embed-Optionen am Video▸

Im Video unter Embed:

Responsive: an
Preload: an
Autoplay: aus
Muted: aus
Loop: aus

Ohne Autoplay ist das Thumbnail das Erste, was der Besucher sieht. Deshalb Schritt 3 (Thumbnail) nicht überspringen.

6Security setzen▸

Menü Security → Allowed Referrers, jede Zeile einzeln eintragen:

kundendomain.de
www.kundendomain.de

Ohne https:// und ohne Slash am Ende.

Sobald ein Referrer drin steht, blockt Bunny alles andere – auch die Vorschau im Dashboard und Staging-Domains. Staging-Domain ggf. mit eintragen.

7Embed-Code anpassen▸

✓ Das macht das Werkzeug oben automatisch für dich – du musst hier nichts von Hand ändern.

Bunny liefert einen Code, der immer auf 16:9 steht. Vier Anpassungen sind nötig (plus max-width, Zentrierung, runde Ecken):

Was	Von	Auf
Seitenverhältnis	`padding-top:56.25%`	`padding-top:100%`
Grauer Streifen unten	`height:100%`	`height:108%`
Versatz oben ausgleichen	`top:0`	`top:-4%`
Fehlende Angabe	(fehlt)	`left:0`

8In Elementor einsetzen▸

HTML-Widget an die gewünschte Stelle ziehen
Code einfügen
Container prüfen: unter Layout muss die Breite auf % stehen, nicht auf px. Steht dort 100 px, wird das Video zu einem schmalen Streifen zusammengedrückt.
Min. Höhe auf 0 lassen
Am Widget unter Erweitert etwa 20 px Margin oben und unten setzen

9Kontrolle▸

Desktop-Vorschau prüfen
Mobile-Ansicht prüfen, dort separat die Containerbreite kontrollieren
Live-Seite mit Cmd/Strg + Shift + R neu laden
Video startet nicht von selbst, Thumbnail ist sichtbar, Play-Button sitzt mittig
Keine grauen Streifen oben oder unten
Ecken sind gerundet

💶 Kosten: Speicher 0,03 USD/GB, Traffic ab 0,005 USD/GB, Transcoding & Player kostenlos. Ein Video pro Landingpage liegt im Cent-Bereich pro Monat. Ein Konto für alle Kunden, Abrechnung über Guthaben.