Comment ajouter une vidéo d’arrière-plan à votre site : en boucle, sans le son et rapide
Mis à jour : 5 novembre 2026
Une vidéo qui se lance toute seule en haut de page ou dans une section attire l’attention, mais mal faite, elle transforme votre site en page lente qui consomme les données mobiles de vos visiteurs. La clé est de distinguer un arrière-plan décoratif d’une vidéo que les gens vont vraiment regarder. Voici comment faire l’un et l’autre.
Les règles des navigateurs
- Une vidéo ne peut démarrer toute seule que si elle est sans le son : Chrome, Safari et Firefox bloquent la lecture automatique avec le son.
- Sur iPhone, il faut l’attribut playsinline pour qu’elle ne s’ouvre pas en plein écran.
- Si l’utilisateur a activé l’économiseur de données ou de batterie, le navigateur peut ne pas la lancer automatiquement : ajoutez toujours une image de repli (poster).
Option 1 : arrière-plan décoratif (clip court sur votre propre site)
Pour un arrière-plan purement décoratif de quelques secondes, sans commandes, le plus léger est un petit fichier servi par votre site. Compressez-le fortement : un clip de 5 à 10 secondes devrait peser moins de 2–3 Mo.
<video autoplay muted loop playsinline preload="metadata" poster="background.jpg" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">
<source src="background.webm" type="video/webm">
<source src="background.mp4" type="video/mp4">
</video>Option 2 : vidéo mise en avant qui se lance toute seule (avec Dembed)
S’il s’agit d’une vidéo que les gens vont regarder (une présentation, une bande-annonce ou une démonstration), hébergez-la sur Dembed et intégrez-la avec l’iframe. Elle ne pèse pas sur votre hébergement, la qualité s’adapte à la connexion et le visiteur peut activer le son ou passer en plein écran.
Ajoutez ?autoplay=1 à la fin de l’adresse d’intégration pour qu’elle démarre toute seule, sans le son. Dans Tableau de bord → Lecteur, vous pouvez activer la boucle et masquer le titre pour un rendu plus épuré.
<iframe src="https://dembed.cc/embed/v_VOTRE_ID?autoplay=1" title="Présentation" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>Conseils pour ne pas ralentir votre site
- N’utilisez pas une vidéo lourde comme arrière-plan du haut de page sur mobile : affichez l’image et ne lancez la vidéo que sur grand écran.
- Utilisez loading="lazy" sur les iframes situées sous le premier écran.
- Réservez l’espace avec aspect-ratio pour que la page ne saute pas pendant le chargement (de meilleurs Core Web Vitals).
- Proposez un moyen de la mettre en pause : c’est mieux pour l’accessibilité et pour les personnes qui ont activé la réduction des animations.
Questions fréquentes
Presque toujours parce qu’elle n’est pas sans le son. Ajoutez muted (et playsinline pour l’iPhone). Avec le son, les navigateurs bloquent la lecture automatique.