Comment ajouter une vidéo en background sur Webflow ?
Apprenez à ajouter une vidéo en arrière-plan d'une section Webflow : autoplay, loop, fallback image et overlay.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter une vidéo en arrière-plan d'une section dans Webflow.
| Option | Avantages | Inconvénients |
|---|---|---|
| Vidéo background Webflow native | Simple, intégrée | Pas de contrôle avancé |
| Embed avec balise | Contrôle total | Nécessite un embed custom |
| YouTube embed background | Léger côté serveur | Dépendance externe, contrôle limité |
1. Utilisez l'élément Background Video natif
Dans le Designer, faites glisser l'élément Background Video depuis le panneau Add Elements. Placez-le dans votre section hero ou dans le Div de votre choix. Dans les Settings, uploadez votre fichier vidéo (MP4 recommandé, moins de 10 Mo pour les performances).
2. Configurez les options vidéo
Dans les Settings de l'élément Background Video : activez Autoplay, Loop et Muted (obligatoire pour l'autoplay sur tous les navigateurs). Désactivez les contrôles si vous ne voulez pas de barre de lecture visible.
3. Ajoutez une image de fallback
Dans les Settings, uploadez une Poster Image : elle s'affiche pendant le chargement de la vidéo et sur mobile (où les vidéos background sont souvent désactivées par défaut). Choisissez une frame représentative de votre vidéo.
4. Superposez votre contenu
Placez votre contenu (titre, CTA) dans un Div en position: absolute ou en z-index supérieur par rapport à la vidéo. Ajoutez un overlay semi-transparent si la vidéo est trop lumineuse pour garantir la lisibilité du texte.
Conclusion
La vidéo background Webflow s'intègre nativement sans code. Pour les performances : améliorer le LCP.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
