Video-Hintergrund spielt auf Mobilgeraeten nicht ab – ZenBlocks buttonBasic
Fazit
Auf Mobilgeraeten liegt das Problem meist an **Autoplay-Beschraenkungen des Browsers**. iOS Safari und Android Chrome begrenzen automatische Wiedergabe. Ein Fallback-Bild sorgt fuer stabiles Rendering.
—
Ursachen
1. **iOS-Safari-Autoplay-Regeln**: Ohne passende Bedingungen startet die Wiedergabe nicht.
2. **Datensparmodus auf Android**: Automatisches Laden kann eingeschraenkt werden.
3. **Datei zu gross**: Mobile Verbindungen laden grosse Dateien nicht zuverlaessig.
4. **Codec nicht kompatibel**: Aeltere Browser unterstuetzen nicht alle Formate.—
Loesung
### Schritt 1: Fallback-Bild setzen
1. Hintergrund-Panel oeffnen.
2. Neben Video ein statisches Fallback-Bild setzen.
3. Dieses Bild wird angezeigt, wenn Video nicht startet.### Schritt 2: Video optimieren
1. Dateigroesse auf **max. 5 MB** begrenzen (empfohlen: <= 2 MB).
2. Fuer Mobilgeraete **max. 720p** verwenden.
3. **MP4 (H.264)** fuer hohe Kompatibilitaet nutzen.
4. Audiospur entfernen.### Schritt 3: Browser-Limits beruecksichtigen
| Umgebung | Wichtigste Einschraenkung |
|—|—|
| iOS Safari | Autoplay braucht `muted` + `playsinline` |
| iOS Energiesparmodus | Autoplay oft deaktiviert |
| Android Datensparmodus | Auto-Laden teils eingeschraenkt |
| Aeltere Browser | Teilweise kein Codec-Support |### Schritt 4: Nach Geraet trennen
1. Desktop: Video-Hintergrund verwenden.
2. Tablet/Smartphone: bei Bedarf statisches Bild nutzen.
3. Verhalten ueber Responsive-Einstellungen trennen.—
Hinweise
– Video-Hintergruende koennen Performance (LCP/Core Web Vitals) verschlechtern.
– Überlagerung + Fallback-Bild haelt das Layout auch ohne Video stabil.—
Verwandte Einstellungen
– [Hintergrundeinstellungen](../background/)
– [Anzeigeeinstellungen](../display/)