Vidéo de fond pour site (HTML5)

Vidéo de fond pour site (HTML5): à quoi ça sert

Une courte vidéo qui tourne en fond en haut du site montre d’emblée l’ambiance, le produit ou le service. Pour fonctionner sur mobile, la vidéo doit être sans son et avoir les attributs muted, autoplay et playsinline.

Le générateur crée la section avec la balise video en MP4 et WebM, une image de couverture, un calque sombre réglable pour garder le texte lisible, un titre et un texte, et un bouton de pause, comme l’exige la WCAG pour tout contenu en mouvement pendant plus de 5 secondes. Pour ceux qui ont demandé moins d’animations, la vidéo démarre déjà en pause.

Mode d’emploi

1. Indiquez les adresses de la vidéo et de l’image de couverture.
2. Écrivez le titre et le texte et réglez le calque sombre.
3. Copiez le code et collez-le en haut de la page.

Quand l’utiliser

• Haut de page d’un site de restaurant ou d’hôtel.
• Landing page d’événement.
• Page d’agence immobilière ou de salle de sport.

Questions fréquentes

Pourquoi la vidéo ne démarre-t-elle pas toute seule sur mobile ?

Les navigateurs n’autorisent la lecture automatique que pour les vidéos sans son. La vidéo a besoin des attributs muted, autoplay et, sur iPhone, playsinline, sinon elle s’ouvre en plein écran ou ne démarre pas. Le code inclut déjà les trois.

Quelle taille de fichier utiliser ?

Une vidéo de fond doit être courte (10 à 20 secondes en boucle) et légère, de préférence moins de 3 à 5 Mo, en 720p ou 1080p sans audio. Compressez avant de publier ; une vidéo lourde ralentit le chargement sur mobile.

Et pour ceux qui préfèrent moins d’animations ?

Pour ceux qui ont activé la réduction des animations dans le système, le script met la vidéo en pause et seule l’image de couverture reste. Il y a aussi un bouton de pause, que la WCAG exige pour tout contenu en mouvement pendant plus de 5 secondes.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires