Videos in Slider Revolution richtig einbinden – Best Practices, Fallstricke und Profi-Tipps
Videos sind ein starkes Stilmittel, um Websites lebendig wirken zu lassen – vor allem im Hero-Bereich auf der Startseite. Mit Slider Revolution für WordPress lassen sich Hintergrundvideos, Slideshows mit Video-Layern und interaktive Play-Buttons nahtlos integrieren.
Doch sobald die Videodatei groß ist, Sound ins Spiel kommt oder zusätzliche Elemente wie Navigationspfeile im Weg stehen, häufen sich die Probleme: Ladezeiten explodieren, Safari spielt keinen Ton ab oder Slider-Controls verhalten sich nicht wie gewünscht.
In diesem Beitrag fassen wir unsere komplette Erfahrung zusammen – von der Dateigröße über Autoplay-Regeln bis hin zu CSS/JS-Tricks, um Pfeile während eines Videos auszublenden.
Inhaltsverzeichnis
1. Videodatei vorbereiten – warum 500 MB nicht funktionieren
- ❌ WordPress-Uploads können fehlschlagen (Timeouts, Limits).
- ❌ Ladezeit und Core Web Vitals werden katastrophal.
- ❌ Besucher springen ab, bevor überhaupt etwas sichtbar wird.
Best Practice:
- Videos auf 10–20 Sekunden kürzen, damit sie geloopt werden können.
- Mit HandBrake oder FFmpeg stark komprimieren (H.264 MP4 oder VP9 WebM).
- Zielgröße: max. 20–30 MB.
- Posterbild (150–200 KB) für schnelle Darstellung nutzen.
2. Hosting-Optionen: HTML5 oder Vimeo?
Variante A – HTML5 Video (empfohlen für Background ohne Ton)
- Video-Dateien (MP4 + WebM) direkt in Slider Revolution als Background Video einfügen.
- Einstellungen: Autoplay = ON, Muted = ON, Loop = ON.
- Mobile: lieber Posterbild anzeigen.
Vorteil: volle Kontrolle, keine fremden Player-Controls, DSGVO-sicherer.
Variante B – Vimeo (empfohlen für Videos mit Ton)
- Originalvideo bei Vimeo hochladen → Streaming mit adaptiver Bitrate.
- In Slider Revolution als Video Layer einfügen.
- Autoplay = OFF, Muted = OFF, Controls je nach Bedarf.
- Eigenen Play-Button hinzufügen (Action: Play + Unmute Video).
Vorteil: Sound funktioniert sauber nach Klick, Bandbreite wird ausgelagert.
3. Autoplay & Sound – Browser-Policies verstehen
- Browser (Safari, Chrome, Edge) blockieren Autoplay mit Sound.
- Autoplay funktioniert nur muted.
- Ton ist nur möglich nach einer echten User-Interaktion (Klick, Tap).
Lösung:
- Video autoplay muted starten → Lautsprecher-Icon einblenden → Action: „Unmute Video“.
- Oder direkt per Play-Button starten (mit Unmute kombiniert).
4. Typische Probleme & Fixes
a) Kein Ton trotz Klick
- Mute in Video Settings = OFF.
- Button-Action: Play + Unmute Video.
- Vimeo-Link muss
muted=0enthalten. - Wichtig: Background-Videos haben nie Ton, nur Layer-Videos!
b) Controls vs. Actions
Mit Vimeo-Controls AN: Klicks auf eigene Buttons greifen nicht.
Mit Vimeo-Controls AUS: Buttons funktionieren, aber Ton muss über „Unmute“-Action oder API aktiviert werden.
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.setMuted(false);
player.play();
c) Slider wechselt zu früh
- Slide Length (z. B. 64000 ms für 1:04 Minuten) erhöhen.
- Pause Slider while Playing = ON → Slider wartet, bis Video fertig ist.
- Next Slide at End = OFF, wenn kein Auto-Wechsel gewünscht ist.
d) Hover stoppt den Slider
Module General Options → Navigation → Progress → Stop on Hover = OFF.
5. Pfeile temporär ausblenden, solange das Video läuft
Die Navigationspfeile sind keine Layer, sondern Teil der Navigation. Um sie nur während des Videos auszublenden:
Schritt 1 – CSS hinzufügen
.hide-arrows .tparrows {
display: none !important;
}
Schritt 2 – JavaScript einfügen (für Vimeo)
var slider = document.getElementById('rev_slider_1_1');
var iframe = slider.querySelector('iframe');
if(iframe && window.Vimeo) {
var player = new Vimeo.Player(iframe);
player.on('play', function() {
slider.classList.add('hide-arrows');
});
player.on('ended', function() {
slider.classList.remove('hide-arrows');
});
}
Ergebnis:
Video startet → Pfeile verschwinden.
Video endet → Pfeile sind wieder da.
Alternative: Pfeile auf „On Hover“ stellen → erscheinen nur bei Mausbewegung.
6. Best Practices für Performance
- Videos doppelt bereitstellen: MP4 (H.264) + WebM (VP9).
- Für Mobile immer ein Posterbild als Fallback.
- Slides mit Video minimalistisch halten (wenig Layer).
- Für SEO: Video als Ergänzung, nicht als Haupt-Content nutzen.
Fazit
Ein Video in Slider Revolution macht Eindruck – aber nur, wenn es richtig eingebunden wird.
- Für kurze Hero-Backgrounds ohne Ton → HTML5, stark komprimiert.
- Für Videos mit Ton und längerer Laufzeit → Vimeo oder Streaming-Service.
- Autoplay mit Ton geht nicht – nutze eigene Buttons oder ein Unmute-Icon.
- Navigationspfeile lassen sich per CSS/JS temporär ausblenden, solange das Video läuft.
So bleibt deine Startseite nicht nur visuell stark, sondern auch technisch performant und benutzerfreundlich. 🚀
👉 Unser Tipp
Brauchst du Hilfe beim Einrichten von Slider Revolution oder beim Optimieren deiner Startseite für Performance und Barrierefreiheit?
Kontaktiere uns bei Three Solutions – wir sorgen dafür, dass deine Website nicht nur gut aussieht, sondern auch technisch perfekt läuft.
