IN PLANUNG
TBA: Bunny Video Loader für Elementor
HLS Video-Hintergründe mit adaptiver Qualität, Lazy-Loading und Desktop-Only Modus TBA: Bunny Video Loader erweitert den nativen Elementor Hintergrund-Tab um Bunny.net HLS-Streaming. Keine neuen Widgets, keine komplizierte Integration – einfach aktivieren und loslegen. Perfekt für performante Video-Hintergründe ohne YouTube/Vimeo Overhead.Features im Überblick
Native Elementor Integration
Erweitert den bestehenden Stil → Hintergrund Tab. Keine neuen Widgets, kein Lernen neuer Interfaces. Funktioniert mit Container und Section. Du findest die neuen Optionen genau dort, wo du Hintergründe erwartest – kein Umdenken nötig.Adaptive Streaming (HLS)
HLS (HTTP Live Streaming) wählt automatisch die beste Qualität basierend auf Bandbreite, Gerät und Viewport. Von 360p bis 1080p – nahtlos und ohne Buffering. Während der Wiedergabe misst der Browser die verfügbare Bandbreite und passt die Qualität in Echtzeit an. Bei langsamer Verbindung wird automatisch auf niedrigere Auflösung gewechselt, bei schneller Verbindung auf höhere.Lazy Loading
Videos laden nur wenn sichtbar (IntersectionObserver API). Spart Bandbreite, verbessert PageSpeed Scores. Kompatibel mit WP Rocket und anderen Performance-Plugins. Ein Video das sich unterhalb des sichtbaren Bereichs befindet wird erst geladen wenn der User 50% davon sieht – keine Verschwendung von Daten beim ersten Seitenaufruf.Auto-Thumbnail von Bunny.net
Lädt automatisch Bunny.net Thumbnails als Fallback. WebP oder JPG – du entscheidest. Oder lade eigene Poster hoch. Das Plugin konvertiert die .m3u8 URL automatisch zur passenden Thumbnail-URL. Wenn das Video nicht lädt oder noch lädt, sieht der User ein schönes Vorschaubild statt eines schwarzen Bildschirms.Desktop-Only Modus
Video wird auf Tablets und Mobile nicht geladen (unter 1024px Bildschirmbreite). Spart mobile Bandbreite und verbessert Performance drastisch. Besonders sinnvoll bei dekorativen Hero-Videos die auf kleinen Bildschirmen nicht zur Geltung kommen. Der User sieht stattdessen das Poster-Bild oder den normalen Elementor-Hintergrund.Playback Rate Control
Zeitlupe (0.25x) bis Zeitraffer (2x) in 0.25er Schritten. Perfekt für dramatische Effekte oder kompakte lange Videos. Einstellbar per Slider im Elementor Panel. Beispiele: 0.5x für cinematic Slow-Motion, 1.5x für energetische City-Scenes, 2x um lange B-Roll Videos zu beschleunigen.Crash-sicher und Fallbacks
Wenn das Video nicht lädt wird automatisch das Poster-Bild als CSS-Background angezeigt. Wenn das Plugin deaktiviert wird bleiben die Settings gespeichert und die Seite funktioniert normal mit Elementor Standard-Hintergründen. Intelligente Konflikt-Erkennung warnt im Editor wenn Elementor-Video und HLS-Video gleichzeitig aktiv sind.Performance-optimiert
Assets (CSS/JS) werden nur geladen wenn tatsächlich ein HLS-Video auf der Seite vorhanden ist. Inline CSS und JavaScript bedeuten keine zusätzlichen HTTP-Requests. hls.js wird vom CDN geladen und im Browser gecacht. Ohne aktives Video: 0 KB Overhead auf deiner Seite.Systemanforderungen
Erforderlich für Installation:- PHP 8.0 oder höher (PHP 8.1+ empfohlen für beste Performance und moderne Features)
- WordPress 6.8 oder höher (nutzt moderne WordPress APIs)
- Elementor 3.32 oder höher (Free oder Pro – beide funktionieren)
- Bunny.net Account für HLS-Video-Hosting (kostenloser Test möglich)
Installation in 3 Schritten
Schritt 1: Plugin installieren
WordPress Admin → Plugins → Installieren → ZIP hochladen Wähle die Dateitba-bunny-video-loader-elementor.zip aus und klicke auf „Jetzt installieren“. Nach erfolgreicher Installation klicke auf „Aktivieren“.
Schritt 2: Elementor öffnen
Öffne eine beliebige Seite oder einen Post mit Elementor. Wähle einen Container oder eine Section aus. Klicke auf den Stil Tab im linken Panel (zweiter Tab neben „Inhalt“).Schritt 3: Bunny HLS Video aktivieren
Scrolle im Hintergrund-Bereich nach unten bis du den Abschnitt „Bunny HLS Video“ siehst. Aktiviere den Schalter „HLS Video aktivieren“. Füge deine Bunny.net HLS URL ein im Format:https://video.bunnycdn.com/play/123456/abc-def/playlist.m3u8
Fertig! Das Video wird automatisch geladen, skaliert und abgespielt. Thumbnails werden von Bunny.net geholt wenn die automatische Option aktiviert ist.
HLS vs. Standard Video – Vergleichstabelle
| Feature | Bunny HLS | Standard MP4 | YouTube/Vimeo |
|---|---|---|---|
| Adaptive Qualität | Ja | Nein | Ja |
| Keine externe UI | Ja | Ja | Nein |
| DSGVO-konform | Ja | Ja | Nein (Cookie-Banner nötig) |
| PageSpeed Impact | +150 KB (einmalig) | 5-50 MB | +500 KB |
| Lazy Loading | Ja (integriert) | Eingeschränkt | Nein |
| Desktop-Only Option | Ja | Nein | Nein |
| Playback Rate Control | Ja (0.25x – 2x) | Nein (nur via Code) | Nein |
| Bandbreiten-Anpassung | Automatisch in Echtzeit | Statisch | Automatisch |
| Hosting-Kosten | Bunny.net (günstig) | Eigener Server (teuer) | Kostenlos (mit Einschränkungen) |
Technische Details
Performance-Zahlen
- 150 KB – hls.js Bibliothek via CDN (wird gecacht)
- 0 KB – Overhead auf Seiten ohne aktives Video
- 50% – Scroll-Threshold für Lazy Loading (Video lädt bei 50% Sichtbarkeit)
- 1024px – Desktop Breakpoint für Desktop-Only Modus
- 2-3 Sekunden – Video-Startzeit (abhängig von Netzwerk)
HLS Adaptive Streaming erklärt
Bunny.net liefert Videos in mehreren Qualitätsstufen (360p, 480p, 720p, 1080p). Der Browser wählt automatisch die beste Auflösung basierend auf mehreren Faktoren:- Bandbreite: Netzwerkgeschwindigkeit wird live gemessen während der Wiedergabe. Bei schneller Verbindung wird auf höhere Qualität hochgeschaltet, bei langsamer Verbindung heruntergeschaltet.
- Gerät: Mobile Geräte erhalten standardmäßig niedrigere Auflösungen um Datenvolumen zu sparen.
- Viewport: Kleine Bildschirme benötigen keine 1080p Auflösung da der Unterschied nicht sichtbar ist.
- Buffer Status: Wenn das Video zu buffern beginnt wird automatisch auf eine niedrigere Qualität gewechselt um flüssige Wiedergabe zu garantieren.
Browser-Kompatibilität
- Chrome/Edge: hls.js (volle Unterstützung)
- Firefox: hls.js (volle Unterstützung)
- Safari Desktop/iOS: Native HLS-Unterstützung (kein hls.js nötig)
- Chrome Mobile: hls.js (volle Unterstützung)
- Opera/Brave: hls.js (volle Unterstützung)
Häufig gestellte Fragen (FAQ)
Funktioniert das mit Elementor Free oder brauche ich Pro?
Antwort: Funktioniert mit Elementor Free UND Pro! Das Plugin erweitert die nativen Container/Section-Elemente, die in beiden Versionen verfügbar sind. Keine Pro-Features erforderlich. Du zahlst nur für Bunny.net Hosting, nicht für zusätzliche Elementor-Lizenzen.Läuft das Video auch auf Mobile/Safari/iOS?
Antwort: Ja! Safari/iOS haben native HLS-Unterstützung (keine hls.js Bibliothek nötig). Alle anderen Browser nutzen hls.js für volle Kompatibilität. Mit dem „Desktop-Only“ Modus kannst du Videos auf Mobile komplett deaktivieren um Bandbreite zu sparen. Das ist besonders sinnvoll bei dekorativen Hero-Videos.Wie viel langsamer wird meine Seite durch das Plugin?
Antwort: Ohne aktives Video: 0 KB Overhead. Mit Video: circa 150 KB für hls.js (einmalig, CDN-gecacht). Lazy Loading sorgt dafür dass Videos nur laden wenn sichtbar. In unseren Tests: +0,1 Sekunden First Contentful Paint bei einem Video above-the-fold. PageSpeed Score bleibt im grünen Bereich! Bei Videos below-the-fold gibt es praktisch keinen messbaren Performance-Impact beim initialen Seitenaufruf.Ist das kompatibel mit WP Rocket und anderen Caching-Plugins?
Antwort: 100% kompatibel mit allen gängigen Caching- und Performance-Plugins:- WP Rocket – vollständig kompatibel
- W3 Total Cache – vollständig kompatibel
- WP Super Cache – vollständig kompatibel
- LiteSpeed Cache – vollständig kompatibel
- Autoptimize – kompatibel (hls.js sollte nicht minifiziert werden)
- Asset CleanUp – kompatibel (hls.js manuell whitelisten)
Woher bekomme ich die .m3u8 URL von Bunny.net?
Antwort: So erhältst du die HLS-URL:- Video bei Bunny.net hochladen (Stream → Video Library)
- Video-Details öffnen in der Bunny.net Oberfläche
- URL kopieren im Format:
https://video.bunnycdn.com/play/123456/abc-def/playlist.m3u8
https://vz-123456.b-cdn.net/abc-def/thumbnail.webp oder .jpg
Du kannst wählen ob das Plugin automatisch Bunny-Thumbnails lädt oder ob du eigene Poster-Bilder hochladen möchtest.
Was passiert wenn ich schon ein Elementor Background-Video habe?
Antwort: Das Plugin zeigt im Editor eine Warnung wenn beide Videos (Elementor Standard-Video und Bunny HLS) gleichzeitig aktiv sind. Im Frontend wird automatisch nur das Bunny HLS-Video gezeigt – das Elementor-Video wird per CSS versteckt um Konflikte zu vermeiden. Im Editor bleiben beide Videos sichtbar damit du den Unterschied sehen kannst. Es gehen keine Daten verloren – die Elementor-Video-Settings bleiben gespeichert falls du das HLS-Video wieder deaktivierst.Kann ich mehrere Videos auf einer Seite verwenden?
Antwort: Ja, unbegrenzt! Jeder Container und jede Section kann ein eigenes HLS-Video haben. Lazy Loading sorgt dafür dass nur die sichtbaren Videos geladen werden. Beispiel: 5 Videos auf der Seite, aber nur 1-2 sind initially visible = nur 1-2 Videos werden beim ersten Seitenaufruf geladen. Die anderen laden erst beim Scrollen. Performance-Tipp: Bei vielen Videos auf einer Seite solltest du den Desktop-Only Modus für einige Videos aktivieren um die mobile Experience nicht zu überlasten.Was ist der Desktop-Only Modus genau?
Antwort: Wenn aktiviert wird das Video auf Bildschirmen unter 1024px Breite (Tablets im Portrait-Modus und Smartphones) komplett ausgeblendet und nicht geladen. Das spart:- Mobile Datenvolumen (wichtig für User mit begrenzten Datentarifen)
- Akku-Laufzeit (Video-Decoding ist energieintensiv)
- Ladezeit auf langsamen mobilen Verbindungen
- Dekorative Hero-Videos die auf Mobile nicht wichtig sind
- Seiten mit viel Text-Content wo das Video nur Dekoration ist
- Performance-kritische Mobile-Seiten
Wie funktioniert die Playback Rate genau?
Antwort: Die Playback Rate steuert die Abspielgeschwindigkeit des Videos. Einstellbar von 0.25x bis 2x in 0.25er Schritten:- 0.25x – 0.5x (Extreme Zeitlupe): Für sehr dramatische Effekte, fast schon Standbild-ähnlich
- 0.75x (Leichte Zeitlupe): Subtiler cinematic Look, immer noch flüssig
- 1.0x (Normal): Standard-Geschwindigkeit wie aufgenommen
- 1.25x – 1.5x (Beschleunigt): Dynamischer, energetischer Look. Gut für Cityscapes oder Tech-Visualisierungen
- 1.75x – 2x (Zeitraffer): Sehr schnell, komprimiert lange Videos. Perfekt für Day-to-Night Transitions oder Cloud-Movements
Welche Kosten entstehen bei Bunny.net?
Antwort: Bunny.net berechnet nach tatsächlichem Verbrauch (Pay-as-you-go):- Video Storage: Circa 0.01 EUR pro GB pro Monat (sehr günstig)
- Video Streaming: Circa 0.01 EUR pro GB Traffic (regional unterschiedlich)
- Encoding: Einmalig circa 0.005 EUR pro Minute Video
- Storage: 500 MB = 0.005 EUR/Monat
- Streaming: 10.000 Views à 100 MB (adaptive quality) = 1 TB = 10 EUR
- Encoding: 2 Minuten = 0.01 EUR (einmalig)
Was passiert wenn das Plugin deaktiviert wird?
Antwort: Alle deine Einstellungen (HLS-URLs, Poster, Optionen) bleiben in der Elementor-Datenbank gespeichert. Die Videos werden einfach nicht mehr gerendert. Die Seite funktioniert normal mit den Standard-Elementor-Hintergründen (Farben, Bilder). Bei Reaktivierung des Plugins funktioniert alles sofort wieder wie vorher – keine Neu-Konfiguration nötig. Es gibt eine Admin-Notice die dich darauf hinweist dass HLS-Videos momentan nicht aktiv sind.Gibt es eine Begrenzung der Video-Länge oder -Größe?
Antwort: Nein, seitens des Plugins gibt es keine Limits. Die einzigen Grenzen sind:- Bunny.net Limits: Abhängig von deinem Plan (meist mehrere GB pro Video)
- Browser-Performance: Sehr lange Videos (über 10 Minuten) als Background können auf älteren Geräten Performance-Probleme verursachen
- UX-Best-Practice: Background-Videos sollten idealerweise 30-120 Sekunden lang sein und loopen
Funktioniert das auch mit anderen HLS-Anbietern außer Bunny.net?
Antwort: Ja! Das Plugin funktioniert mit jeder standardkonformen HLS .m3u8 URL. Getestet mit:- Bunny.net (empfohlen)
- AWS CloudFront mit MediaConvert
- Cloudflare Stream
- Azure Media Services
- Eigener HLS-Server (nginx-rtmp, etc.)
Wie kann ich testen ob Lazy Loading funktioniert?
Antwort: So überprüfst du Lazy Loading:- Erstelle eine Seite mit mehreren Containern mit Videos (z.B. 3 Stück)
- Platziere mindestens ein Video below-the-fold (nicht im sichtbaren Bereich)
- Öffne die Seite im Browser
- Drücke F12 für Developer Tools
- Gehe zum „Network“ Tab
- Filtere nach „.m3u8“ oder „playlist“
- Lade die Seite neu
- Du siehst nur die Videos above-the-fold laden
- Scrolle nach unten
- Sobald das below-the-fold Video zu 50% sichtbar ist, siehst du neue .m3u8 Requests im Network Tab
Kann ich das Video auch ohne Autoplay nutzen?
Antwort: Ja! Deaktiviere einfach die „Autoplay“ Option im Elementor Panel. Das Video lädt trotzdem (wenn Lazy Loading aktiv erst bei Sichtbarkeit), aber startet nicht automatisch. Der User muss manuell auf Play klicken. Achtung: Für Background-Videos ist Autoplay fast immer sinnvoll, da es keine sichtbaren Player-Controls gibt. Ohne Autoplay sieht der User nur das Poster-Bild und kann das Video nicht starten (außer du baust eigene Custom-Controls). Wenn du kein Autoplay möchtest solltest du überlegen ob ein Background-Video die richtige Wahl ist, oder ob ein normales Elementor Video Widget (mit Controls) besser passt.Wie DSGVO-konform ist das Plugin?
Antwort: Das Plugin selbst ist vollständig DSGVO-konform:- Keine Tracking-Scripts
- Keine Cookies
- Keine Datenübermittlung an Dritte (außer Bunny.net für Video-Streaming)
- Keine externen Embeds die User tracken
- Kein Google Analytics, Facebook Pixel oder ähnliches
- Server in Europa möglich
- Data Processing Agreement (DPA) verfügbar
- Keine User-Tracking über Videos
- IP-Adressen werden nur für technische Zwecke (CDN-Routing) genutzt
Gibt es Support und Updates?
Antwort: Ja! Das Plugin wird aktiv gewartet:- Updates: Bei neuen WordPress/Elementor Versionen testen wir Kompatibilität
- hls.js Updates: Wichtige Security-Updates werden eingepflegt
- Bug-Fixes: Gemeldete Bugs werden zeitnah gefixt
- Feature-Requests: Sinnvolle Erweiterungen werden geprüft und ggf. umgesetzt
- GitHub Issues für technische Bugs
- E-Mail Support für allgemeine Fragen
- Dokumentation im README
Bekannte Einschränkungen
Was funktioniert NICHT?
- Internet Explorer: Keine Unterstützung (Browser ist End-of-Life)
- Sehr alte Browser: Keine IntersectionObserver API = kein Lazy Loading (Videos laden sofort)
- localStorage/sessionStorage: Wird bewusst nicht genutzt (Claude.ai Environment-Restriction, aber auch nicht nötig)
- Custom Player Controls: Keine Play/Pause Buttons (es ist ein Background-Video, nicht ein Player)
- Picture-in-Picture: Nicht unterstützt für Background-Videos
- Fullscreen: Nicht sinnvoll für Background-Videos
- Chapters/Untertitel: Nicht unterstützt (Background-Videos brauchen das nicht)
Wann sollte ich das Plugin NICHT nutzen?
- Wenn du Player-Controls brauchst (Play/Pause/Seek) → nutze Elementor Video Widget
- Wenn du Untertitel oder Chapters brauchst → nutze spezialisierte Video-Player
- Wenn deine Zielgruppe hauptsächlich auf sehr langsamen Verbindungen ist (unter 1 Mbit/s) → statische Bilder sind besser
- Wenn du keine Kontrolle über das Video-Hosting hast → das Plugin braucht HLS .m3u8 URLs
- Wenn du Elementor < 3.32 nutzt → Update erst auf aktuelle Version
Best Practices
Optimale Video-Settings für Background-Videos
- Länge: 30-120 Sekunden (Loop aktiviert)
- Format: 16:9 oder 21:9 für beste Kompatibilität
- Auflösungen: Lass Bunny.net 360p, 480p, 720p, 1080p erzeugen
- Framerate: 24-30 fps ausreichend (60fps ist
- Framerate: 24-30 fps ausreichend (60fps ist Overkill und verschwendet Bandbreite)
- Codec: H.264 für beste Kompatibilität (Bunny.net macht das automatisch)
- Audio: Entfernen oder sehr leise (Background-Videos sollten stumm sein)
- Kompression: Mittel bis hoch (Bitrate 2-5 Mbit/s für 1080p)
- Farbkorrektur: Leicht entsättigt wirkt oft besser als knallige Farben
- Motion: Langsame, fließende Bewegungen (hektische Cuts lenken ab)
UX-Empfehlungen
- Overlay immer nutzen: Dunkles Overlay (rgba(0,0,0,0.35)) macht Text besser lesbar
- Kontrast prüfen: Text muss auch bei hellem Video gut lesbar sein
- Desktop-Only bei viel Content: Wenn die Seite textlastig ist, deaktiviere Videos auf Mobile
- Poster-Image wählen: Nimm einen repräsentativen Frame aus der Video-Mitte (nicht schwarz)
- Loop-Punkt beachten: Der Übergang vom Ende zum Start sollte smooth sein
- Nicht übertreiben: Max 1-2 Video-Backgrounds pro Seite, sonst wirkt es überladen
- Above-the-fold bevorzugen: Hero-Videos haben die größte Wirkung
Performance-Tipps
- Lazy Loading aktiviert lassen: Standard-Einstellung ist optimal
- WebP-Thumbnails nutzen: Kleiner als JPG bei gleicher Qualität
- Desktop-Only für Deko-Videos: Spart mobile Bandbreite erheblich
- Multiple Videos: Bei 3+ Videos sollten mindestens 2 below-the-fold sein
- Cache-Plugin nutzen: WP Rocket oder ähnliches für statische Inhalte
- CDN für restliche Assets: Bunny.net hat auch ein generelles CDN für CSS/JS/Images
- Preload vermeiden: Lass Lazy Loading die Arbeit machen, kein manuelles Preloading
SEO-Überlegungen
- Alt-Text für Poster: Nicht nötig (Background-Videos sind dekorativ)
- PageSpeed: Videos below-the-fold haben keinen negativen Impact auf LCP
- Core Web Vitals: Mit Lazy Loading bleiben alle Scores im grünen Bereich
- Accessibility: Stelle sicher dass Text über Video kontraststark genug ist
- Prefers-reduced-motion: Plugin respektiert diese Browser-Einstellung nicht automatisch (könnte in Zukunft ergänzt werden)
Troubleshooting
Video lädt nicht / Schwarzer Bildschirm
Mögliche Ursachen und Lösungen:- Falsche URL: Prüfe ob die .m3u8 URL korrekt ist. Format muss sein:
https://video.bunnycdn.com/play/123456/abc/playlist.m3u8 - CORS-Problem: Öffne Browser-Konsole (F12) und prüfe auf CORS-Fehler. Bunny.net muss CORS-Header korrekt setzen (normalerweise automatisch der Fall)
- Video nicht öffentlich: Stelle sicher dass das Video bei Bunny.net auf „öffentlich“ gestellt ist
- Netzwerk-Problem: Prüfe im Network-Tab ob die .m3u8 Datei überhaupt geladen wird
- Ad-Blocker: Manche Ad-Blocker blockieren CDN-Requests. Teste mit deaktiviertem Ad-Blocker
Video lädt aber spielt nicht ab
- Autoplay blockiert: Browser blockieren Autoplay ohne User-Interaktion. Lösung: Stelle sicher dass „Muted“ aktiviert ist
- Browser-Kompatibilität: Sehr alte Browser haben kein HLS-Support. Prüfe Browser-Version
- Codec-Problem: Stelle sicher dass Bunny.net H.264 Codec nutzt (Standard)
Lazy Loading funktioniert nicht
- Browser zu alt: IntersectionObserver API erst ab Chrome 51, Firefox 55, Safari 12.1
- Container außerhalb Viewport: Video muss mindestens 50% sichtbar sein bevor es lädt
- Display:none auf Parent: Wenn der Container selbst hidden ist lädt das Video nicht
- Andere Lazy-Load-Scripts: Konflikte mit anderen Lazy-Loading-Plugins prüfen
Performance-Probleme trotz Plugin
- Zu viele Videos: Reduziere Anzahl oder nutze Desktop-Only für einige
- Zu hohe Auflösung: Bunny.net sollte auch 480p/720p anbieten, nicht nur 1080p
- Andere Performance-Probleme: Prüfe ob das Problem wirklich vom Video kommt (PageSpeed Insights nutzen)
- Hosting-Problem: Langsamer Server kann auch bei gutem Video-Setup Probleme machen
Desktop-Only zeigt Video auf Mobile
- Cache nicht geleert: Lösche Browser-Cache und WordPress-Cache
- CSS wird überschrieben: Prüfe ob Theme oder anderes Plugin die CSS-Regel überschreibt
- Breakpoint-Logik: 1024px ist der Standard, bei custom Breakpoints ggf. CSS anpassen
Elementor-Video und HLS-Video beide sichtbar
- Cache-Problem: Leere alle Caches (Browser, WordPress, CDN)
- CSS nicht geladen: Prüfe ob die Plugin-CSS-Datei geladen wird
- Spezifitäts-Problem: Theme überschreibt die display:none Regel
Thumbnail wird nicht automatisch geladen
- Falsche URL-Struktur: Auto-Thumbnail funktioniert nur mit Bunny.net URLs im Standard-Format
- Thumbnail existiert nicht: Bunny.net muss das Video erst verarbeitet haben (kann einige Minuten dauern)
- Format-Problem: Probiere JPG statt WebP wenn WebP nicht lädt
- Lösung: Nutze die manuelle Poster-Upload-Option
Playback Rate funktioniert nicht
- Browser-Kompatibilität: Sehr alte Browser unterstützen playbackRate nicht
- HLS.js Problem: Prüfe Browser-Konsole auf Fehler
- Safari iOS: Playback Rate kann auf iOS eingeschränkt sein
Erweiterte Anwendungsfälle
Hero-Section mit Video-Background
Typischer Aufbau:- Container mit HLS-Video Background
- Min-Höhe: 80vh oder 100vh
- Overlay: rgba(0,0,0,0.4) für Text-Lesbarkeit
- Heading + Subheading + CTA-Button zentriert
- Desktop-Only: Optional, je nach Content-Fokus
- Playback Rate: 0.75x für cinematic Slow-Motion Look
Split-Screen Design mit Video links/rechts
- Section mit 2 Columns (50/50)
- Linke Column: Inner-Container mit Video-Background
- Rechte Column: Text-Content
- Object-Fit: Cover für beide
- Desktop-Only: Ja (auf Mobile werden Columns gestackt, Video oben als normales Bild)
Produkt-Showcase mit Detail-Videos
- Mehrere Sections untereinander
- Jede Section: Produkt-Info + Video-Background des Produkts in Nutzung
- Lazy Loading: Essentiell bei mehreren Videos
- Playback Rate: 1.25x für dynamischen Look
- Desktop-Only: Empfohlen, da Mobile Users eher Produkt-Details lesen wollen
Fullpage-Video mit Scroll-Sections
- Ein langes Video (2-3 Minuten) als Background für eine komplette Fullpage-Seite
- Sections transparent über dem Video
- Video läuft durch während User scrollt
- Overlay: Variabel per Section (manche dunkler, manche heller)
- Playback Rate: 1.5x um Video zu komprimieren
- Desktop-Only: Ja (komplexes Design funktioniert auf Mobile nicht gut)
Parallax-Effekt mit Video
- Container mit Video-Background
- Elementor Motion Effects: Transform → translateY mit scroll trigger
- Video bewegt sich langsamer als Scroll-Geschwindigkeit
- Object-Fit: Cover mit höherer Min-Höhe für Parallax-Raum
- Performance: Kann auf älteren Geräten ruckeln, Desktop-Only empfohlen
Migration von anderen Lösungen
Von Elementor Standard-Video
- Lade dein MP4-Video bei Bunny.net hoch
- Warte auf Encoding (Bunny.net erstellt automatisch HLS-Versionen)
- Kopiere die .m3u8 URL
- Öffne Container in Elementor
- Aktiviere Bunny HLS Video
- Füge URL ein
- Elementor-Video wird automatisch versteckt (oder lösche es)
Von YouTube/Vimeo Embeds
- Lade Video bei Bunny.net hoch (Download von YouTube möglich mit Tools wie youtube-dl)
- Erhalte .m3u8 URL
- Ersetze Elementor Video Widget durch Container mit HLS-Background
- Passe Overlay und Sizing an
Von Custom-Code-Lösungen
Wenn du bereits Custom-HTML/CSS/JS für Video-Backgrounds nutzt kannst du zu diesem Plugin migrieren für:- Bessere Wartbarkeit (keine Code-Updates nötig)
- GUI-Steuerung (alles im Elementor Panel)
- Integriertes Lazy Loading
- Automatische Browser-Kompatibilität
- Desktop-Only ohne Custom Media Queries
Roadmap und geplante Features
Hinweis: Dies sind mögliche zukünftige Features, keine Garantien. Das Plugin ist bereits vollständig funktional und production-ready.In Evaluation
- Prefers-Reduced-Motion Support: Automatisches Pausieren bei User-Präferenz für reduzierte Bewegung
- Custom Breakpoints: Desktop-Only Breakpoint individuell einstellbar statt fixe 1024px
- Video-Start/End-Trimming: Video nur von Sekunde X bis Y abspielen (statt komplettes Video)
- Multiple Poster-Images: Verschiedene Poster für verschiedene Breakpoints
- Fade-In Animation: Video sanft einblenden statt sofortiges Erscheinen
- Quality-Selector: Manuelle Qualitätswahl überschreiben (force 720p z.B.)
- Analytics-Integration: Optional: Video-View-Tracking (DSGVO-konform)
- Bunny.net API Integration: Video-Upload direkt aus WordPress
Nicht geplant
- Player-Controls (Play/Pause Buttons) – widerspricht Background-Video-Konzept
- Untertitel-Support – für Background-Videos nicht relevant
- Live-Streaming – anderer Use-Case, würde Plugin überladen
- Audio-Steuerung – Background-Videos sollten stumm sein
Entwickler-Informationen
Hooks und Filter
Das Plugin bietet derzeit keine öffentlichen Hooks oder Filter. Alle Funktionalität ist über das Elementor-Panel steuerbar. Falls du Custom-Anpassungen brauchst kannst du Issues auf GitHub erstellen.Code-Struktur
Das Plugin nutzt moderne PHP 8.0+ Features:- Strict Types:
declare(strict_types=1)für Type Safety - Return Type Declarations: Alle Funktionen haben explizite Return-Types
- Null Coalescing: Für sichere Default-Werte
- Named Parameters: Bei komplexen Function-Calls
Testing
Das Plugin wurde getestet auf:- PHP 8.0, 8.1, 8.2, 8.3
- WordPress 6.8.x
- Elementor 3.32.x (Free und Pro)
- Chrome 120+, Firefox 121+, Safari 17+, Edge 120+
- iOS Safari 16+, Chrome Mobile 120+
Contributing
Das Plugin ist Open Source (GPL-2.0). Contributions sind willkommen:- Fork auf GitHub
- Feature-Branch erstellen
- Pull Request mit Beschreibung
- Code muss PHP 8.0+ Standards folgen
- Tests auf mindestens 2 Browsern
Credits und Lizenz
Entwickelt von
TBA-Berlin – Spezialisiert auf WordPress/Elementor Performance-OptimierungGenutzte Bibliotheken
- hls.js (v1.5.15) – Apache 2.0 License – Video.dev Team
- Elementor – GPL-3.0 – Elementor Ltd.
- WordPress – GPL-2.0+ – WordPress Foundation
Lizenz
GPL-2.0-or-later – GNU General Public License v2 oder höher. Du darfst das Plugin frei nutzen, modifizieren und verteilen unter den Bedingungen der GPL.Support
- GitHub: Issues für Bugs und Feature-Requests
- E-Mail: support@tba-berlin.de
- Dokumentation: README.md im Plugin-Ordner
Zusammenfassung
TBA: Bunny Video Loader für Elementor ist die einfachste Lösung um performante, adaptive Video-Hintergründe in Elementor zu integrieren. Keine neuen Widgets, keine komplexe Konfiguration – einfach den bestehenden Hintergrund-Tab erweitern und fertig. Hauptvorteile auf einen Blick:- Native Elementor-Integration – kein Umlernen nötig
- HLS Adaptive Streaming – beste Qualität für jeden User automatisch
- Lazy Loading – nur sichtbare Videos werden geladen
- Desktop-Only Modus – mobile Bandbreite sparen
- Playback Rate Control – kreative Geschwindigkeitseffekte
- Auto-Thumbnails – Fallbacks von Bunny.net
- Performance-optimiert – minimaler Overhead
- DSGVO-konform – kein Cookie-Banner nötig
- Crash-sicher – intelligente Fallbacks bei Problemen
- Cache-kompatibel – funktioniert mit allen gängigen Performance-Plugins
- Hero-Sections mit Video-Hintergrund
- Produkt-Showcases mit dynamischen Backgrounds
- Landingpages mit hohem Visual-Impact
- Corporate-Websites mit professionellem Look
- Portfolio-Sites für Kreative
- Video-Player mit Controls (nutze Elementor Video Widget)
- Videos mit Untertiteln oder Chapters
- Live-Streaming (anderer Use-Case)
- Sehr alte Browser (IE11 und älter)
Quick-Start Guide
In 5 Minuten zum ersten Video-Background:- Video bei Bunny.net hochladen
- Account erstellen auf bunny.net
- Stream → Video Library → Upload
- Warten bis Encoding fertig (wenige Minuten)
- .m3u8 URL kopieren
- Plugin installieren
- WordPress Admin → Plugins → ZIP hochladen
- Aktivieren
- In Elementor konfigurieren
- Container/Section auswählen
- Stil → Hintergrund → „Bunny HLS Video“
- HLS Video aktivieren: AN
- URL einfügen
- Bunny Thumbnail automatisch: AN
- Overlay: rgba(0,0,0,0.35)
- Min-Höhe: 60vh
- Autoplay: AN, Muted: AN, Loop: AN
- Optional: Desktop-Only aktivieren
- Nur Desktop abspielen: AN
- Speichern und testen
- Elementor speichern
- Seite im Frontend öffnen
- Video sollte automatisch abspielen
Häufige Missverständnisse
„HLS ist nur für Live-Streaming“
Falsch. HLS funktioniert perfekt für On-Demand-Videos. Der Hauptvorteil ist adaptive Bitrate, nicht Live-Funktionalität. Du kannst normale Video-Dateien bei Bunny.net hochladen und HLS-Streaming nutzen ohne Live-Setup.„Adaptive Streaming braucht ich nicht, alle haben schnelles Internet“
Falsch. Selbst mit schnellem Internet schwankt die Bandbreite. Mobile-User wechseln zwischen WIFI und 4G/5G. HLS passt sich in Echtzeit an und verhindert Buffering. Außerdem: Viele User haben immer noch limitierte Datenvolumen.„Lazy Loading ist nur für Bilder“
Falsch. Lazy Loading funktioniert perfekt für Videos und spart deutlich mehr Bandbreite als bei Bildern. Ein einzelnes Video kann 10-50 MB groß sein – bei mehreren Videos auf einer Seite ist Lazy Loading essentiell.„Background-Videos sind schlecht für SEO“
Teilweise richtig. Videos above-the-fold können LCP (Largest Contentful Paint) beeinflussen. Mit Lazy Loading und Bunny CDN ist der Impact minimal. Videos below-the-fold haben keinen negativen SEO-Impact. PageSpeed Scores bleiben grün wenn richtig implementiert (was dieses Plugin tut).„Ich brauche Elementor Pro für Video-Backgrounds“
Falsch. Elementor Free hat bereits Background-Video-Support. Dieses Plugin erweitert diese Funktionalität um HLS-Streaming. Elementor Pro ist nicht erforderlich.„Das Plugin verlangsamt meine Seite immer“
Falsch. Ohne aktives Video: 0 KB Overhead. Mit Video aber Lazy Loading: Nur minimaler Impact (150 KB für hls.js, einmalig). Videos below-the-fold haben praktisch keinen Einfluss auf initiale Ladezeit.„Auto-Thumbnails funktionieren mit jedem CDN“
Falsch. Auto-Thumbnail-Konvertierung funktioniert nur mit Bunny.net URLs weil wir deren URL-Struktur kennen. Bei anderen Anbietern musst du Poster manuell hochladen (was auch gut funktioniert).„Desktop-Only bedeutet das Video wird auf Mobile gelöscht“
Falsch. Desktop-Only bedeutet das Video wird auf Mobile nicht geladen (spart Bandbreite). Die Settings bleiben gespeichert. Wenn User zur Desktop-Ansicht wechselt (oder du Desktop-Only deaktivierst) ist das Video sofort wieder da.Checkliste für optimale Performance
Nutze diese Checkliste um sicherzustellen dass deine Video-Backgrounds optimal performen:Video-Optimierung
- Video ist 30-120 Sekunden lang
- Video loopt sauber (Ende → Start ist smooth)
- Audio wurde entfernt oder ist sehr leise
- Bunny.net hat Multiple Qualities erzeugt (360p-1080p)
- Codec ist H.264 (Bunny.net Standard)
- Framerate ist 24-30 fps (nicht 60fps)
- Video hat guten Loop-Point gewählt
Plugin-Settings
- Lazy Loading ist aktiviert (Standard)
- Bunny Thumbnail automatisch ist AN
- WebP-Format gewählt (kleiner als JPG)
- Overlay-Farbe gesetzt für Text-Lesbarkeit
- Autoplay + Muted aktiviert (für Browser-Kompatibilität)
- Loop aktiviert (für Endlos-Wiedergabe)
- playsinline aktiviert (für iOS)
UX und Design
- Text über Video ist kontrastreich und lesbar
- Poster-Image ist gewählt und sieht gut aus
- Desktop-Only erwogen für textlastige Sections
- Nicht mehr als 2 Videos above-the-fold
- Bei mehreren Videos: mindestens 2 below-the-fold
Testing
- Video auf Desktop Chrome getestet
- Video auf Safari (macOS/iOS) getestet
- Video auf Mobile Chrome getestet
- Lazy Loading getestet (Browser Developer Tools)
- Desktop-Only auf Mobile getestet
- PageSpeed Insights Score geprüft
- Bei Autoplay-Block: Fällt elegant auf Poster zurück
Performance-Monitoring
- LCP (Largest Contentful Paint) unter 2.5s
- FID (First Input Delay) unter 100ms
- CLS (Cumulative Layout Shift) unter 0.1
- Keine Console-Errors in Browser DevTools
- Bunny.net Bandwidth-Verbrauch im Rahmen
Viel Erfolg mit TBA: Bunny Video Loader für Elementor! Bei Fragen, Problemen oder Feature-Requests kontaktiere uns über GitHub Issues oder per E-Mail. Wir freuen uns über dein Feedback!
