Vidéo background Webflow : l'ajouter et l'optimiser

Qu'est-ce que l'élément Background Video de Webflow ?

Background Video est un élément natif de Webflow qui affiche une vidéo en arrière-plan d'un bloc. Il fonctionne comme une div : vous pouvez y placer titres, textes et boutons. La vidéo se lit sans son, en boucle, sans barre de lecture, ce qui la distingue de l'élément Video ou d'un embed YouTube.

Préparer la vidéo avant de l'importer

D'après l'aide Webflow sur les styles d'arrière-plan, l'élément accepte les fichiers webm, mp4, mov et ogg de moins de 30 Mo. Après l'import, Webflow les convertit en mp4 et en webm. Évitez les espaces et caractères spéciaux dans le nom du fichier (les tirets sont acceptés).

30 Mo est une limite, pas un objectif. Voici les réglages d'export que nous recommandons :

• Durée : une boucle de 10 à 20 secondes, avec une fin qui se raccorde au début.
• Définition : 1280 × 720 suffit souvent pour un fond, surtout sous un calque sombre. Réservez le 1920 × 1080 aux plans très nets.
• Format : mp4 en H.264, le plus compatible.
• Audio : supprimez la piste son, inutile puisque le fond est muet.
• Poids : visez quelques mégaoctets. HandBrake (gratuit) ou FFmpeg permettent de baisser le débit jusqu'à la limite où la qualité se dégrade visiblement.
• Contenu : des plans calmes, sans texte incrusté ni flash. Le message doit rester dans le HTML, pas dans la vidéo.

Ajouter une vidéo background sur Webflow en 5 étapes

1. Ouvrez le panneau Add (touche A) et glissez l'élément Background Video dans la section voulue.
2. Sélectionnez-le, puis double-cliquez ou appuyez sur Entrée pour ouvrir ses réglages, et importez votre fichier.
3. Donnez-lui une classe et une taille : largeur 100 %, hauteur 100vh pour un hero plein écran ou une hauteur minimale en rem pour un bandeau.
4. Placez à l'intérieur un conteneur avec votre titre, votre texte et votre bouton, puis réglez le Flexbox pour les centrer.
5. Publiez et testez sur le site en ligne, sur ordinateur et sur un vrai téléphone.

Les réglages : Autoplay, Loop et bouton play/pause

Gardez le bouton play/pause. Selon l'article d'aide Webflow sur le bouton play/pause, il est positionné en absolute dans la vidéo, a deux états (Play et Pause) avec des icônes remplaçables, et un contour visible au clavier. Donnez-lui un z-index supérieur à celui de votre contenu pour qu'il reste cliquable. Si vous changez les icônes, renseignez leur texte alternatif et donnez une taille en px aux SVG.

Rendre le texte lisible sur la vidéo

Ajoutez une div « overlay » comme premier enfant du Background Video : position Absolute, préréglage Full, couleur de fond noire à 40 à 60 % d'opacité, ou un dégradé vers le bas. Placez ensuite le contenu dans un conteneur en position Relative avec un z-index de 1 pour qu'il passe devant le calque.

Vérifiez le contraste sur l'image la plus claire de la boucle, pas sur la première. Si les notions d'absolute et de z-index vous posent problème, voir notre guide des positions dans Webflow.

Performance : ne pas ralentir la page

Une vidéo en haut de page se télécharge au chargement et entre en concurrence avec les autres ressources. Gardez le titre et le bouton en HTML pour qu'ils s'affichent immédiatement, et mesurez l'impact avec PageSpeed Insights (voir notre guide des Core Web Vitals).

Chez Synqro, quand nous mettons une vidéo dans un hero, nous la limitons à une seule par page, nous la plaçons sous un calque qui permet une compression plus forte, et nous vérifions le score mobile avant et après l'ajout. Si le site consomme beaucoup de bande passante, voir aussi comment réduire la bande passante d'un site Webflow.

Sur mobile, vous pouvez masquer le Background Video au breakpoint concerné (display: none) et afficher à la place une image de fond légère. C'est souvent le meilleur compromis sur les petites connexions.

Accessibilité : mouvement réduit et WCAG 2.2.2

Le critère 2.2.2 des WCAG (Pause, arrêt, masquage) demande qu'un contenu qui bouge automatiquement pendant plus de 5 secondes puisse être mis en pause, arrêté ou masqué. C'est exactement le rôle du bouton play/pause.

Webflow met aussi la vidéo en pause pour les visiteurs qui ont activé la réduction des animations dans leur système. Si le bouton est désactivé, ces visiteurs ne peuvent plus du tout la lancer. Pour le reste, voir notre guide de l'accessibilité web.

Pourquoi ma vidéo background ne se lance pas ?

• Le téléphone est en mode économie d'énergie ou économie de données : Webflow indique que l'autoplay peut alors être bloqué sur les appareils tactiles.
• Le visiteur a activé la réduction des animations : la vidéo démarre en pause, c'est voulu.
• Autoplay video a été décoché dans les réglages.
• La conversion n'est pas terminée juste après l'import : attendez la fin du traitement avant de publier.
• Pour une vidéo intégrée en code personnalisé, les attributs muted et playsinline manquent : le guide MDN sur l'autoplay rappelle que les navigateurs bloquent la lecture automatique avec son.

Une vidéo de fond sert le message ou ne sert à rien : sur une page de conversion, testez-la face à une image fixe. Voir notre guide pour créer une landing page sur Webflow, ou confiez l'intégration à l'équipe Webflow de Synqro.