La vidéo de fond ne se lit pas sur mobile – ZenBlocks buttonBasic
Conclusion
Sur mobile, l’absence de lecture d’une vidéo de fond est généralement liée aux **restrictions d’autoplay imposées par le navigateur**. iOS Safari et Android Chrome limitent la lecture automatique pour économiser batterie et données. Ajoutez une image de secours pour garantir un rendu stable.
—
Causes
1. **Restriction d’autoplay sur iOS Safari**: la lecture automatique exige des conditions strictes (notamment vidéo muette et lecture inline). En mode économie d’énergie, elle peut être totalement bloquée.
2. **Mode économie de données**: sur Android, le chargement automatique de la vidéo peut être limité.
3. **Fichier vidéo trop lourd**: un fichier volumineux peut ne pas se charger correctement sur réseau mobile.
4. **Codec non pris en charge**: certains navigateurs anciens ne lisent pas tous les formats.—
Procédure
### Étape 1: définir une image de secours
1. Ouvrez le panneau des paramètres d’arrière-plan.
2. Définissez une **image statique de fallback** en plus de la vidéo.
3. Si la vidéo ne peut pas se lire, cette image sera affichée.### Étape 2: optimiser le fichier vidéo
1. Gardez la taille du fichier à **5 MB max** (recommandé: 2 MB ou moins).
2. Pour mobile, visez une résolution **720p max**.
3. Utilisez **MP4 (codec H.264)** pour une compatibilité large.
4. Supprimez la piste audio.### Étape 3: tenir compte des limites navigateur
Ces limites ne peuvent pas être contrôlées par le plugin.
| Environnement | Limite principale |
|—|—|
| iOS Safari | autoplay exige `muted` + `playsinline` |
| iOS mode économie d’énergie | autoplay souvent désactivé |
| Android mode économie de données | chargement auto parfois limité |
| anciens navigateurs | support codec partiel |### Étape 4: différencier par appareil
1. Utilisez une vidéo de fond pour desktop.
2. Utilisez une image statique sur tablette/smartphone si nécessaire.
3. Séparez les réglages via les options responsive.—
Points d’attention
– Une vidéo de fond peut dégrader les performances (LCP / Core Web Vitals).
– Le duo overlay + image de fallback permet de garder un rendu cohérent même sans lecture vidéo.—
Paramètres liés
– [Paramètres d’arrière-plan](../06-background-settings.md)
– [Paramètres d’affichage](../03-display-settings.md)