Comment créer une vidéo d’arrière-plan pilotée par le CMS dans Webflow avec des éléments personnalisés : une vidéo HTML5 native et des balises source liées aux champs CMS, sans code personnalisé, plus un cloneable.
Aujourd’hui, on va construire des vidéos d’arrière-plan pilotées par le CMS dans vos projets Webflow, en utilisant des éléments personnalisés pour obtenir une vraie balise <!-- fs-richtext-ignore --> <video> native en arrière-plan, sans code personnalisé ni embed. Il y a aussi un cloneable pratique à la fin de l’article, à cloner, ainsi qu’une courte vidéo qui explique le tout.
Une vidéo d’arrière-plan, c’est quoi au juste ?
En deux mots, c’est une vidéo silencieuse, en boucle, généralement plutôt légère, qui se lance toute seule, la plupart du temps derrière autre chose. Voyez-la comme le héros discret de l’esthétique web, qui travaille sans relâche en coulisses. Envie d’un aperçu ?
<iframe height="300" style="width: 100%;" scrolling="no" title="Background Video Example" src="https://codepen.io/milkmoonstudio/embed/qBvgpjK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/qBvgpjK">
Background Video Example</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Les points importants ici sont autoplay, muted et loop. La solution dans Webflow est d’habitude toute simple : ajouter un élément vidéo d’arrière-plan, téléverser une petite vidéo et c’est réglé. Sauf que, voilà, ça ne fonctionne pas sur les pages CMS ni dans les listes de collection, parce que le fichier est téléversé dans l’élément lui-même au lieu d’être tiré d’un champ CMS. Quelle est la solution ? Eh bien, d’habitude, on passait par du code intégré personnalisé, pour une balise <!-- fs-richtext-ignore --> <video> ou <iframe> (et on en a parlé dans un autre article ici), mais maintenant que Webflow propose l’élément personnalisé, on peut simplement construire un élément vidéo avec au moins deux éléments personnalisés (peut-être plus) : un pour la vidéo et un pour chaque source à l’intérieur.
Mais d’abord, parlons d’iframe contre video.
Peser vos options
Choisir entre une balise <!-- fs-richtext-ignore --> <video> et une iframe dépend de vos besoins précis :
- Si vous cherchez la performance et un contrôle direct sur votre contenu vidéo, avec de meilleures perspectives SEO, optez pour la balise <!-- fs-richtext-ignore --> <video>.
- Si la facilité d’utilisation, l’accès aux fonctionnalités propres à une plateforme et une sécurité supplémentaire sont vos priorités, une iframe peut être la bonne voie.
Les deux approches ont leur place dans la boîte à outils du web designer, et le bon choix dépend de l’équilibre entre contrôle, performance et fonctionnalités dans votre projet. Personnellement, je dirais que les iframes se chargent plus lentement et, quand vous utilisez quelque chose comme Vimeo comme source de la vidéo, la qualité peut en pâtir, puisque vous n’avez aucun contrôle sur les débits adaptatifs, etc. Si vous tenez à Vimeo comme source, nous avons aussi écrit sur l’optimisation des vidéos d’arrière-plan Vimeo dans Webflow avec du code d’intersection.
Voici l’élément personnalisé : le game changer de Webflow
L’élément personnalisé de Webflow, c’est comme trouver un passage secret dans un jeu vidéo qui mène à des trésors cachés. Il nous permet de créer des éléments HTML directement sur le canevas, y compris ceux que Webflow ne propose pas nativement, et, une fois placé dans une liste de collection, vous pouvez le lier à des champs CMS, des attributs, des balises et du texte. Pour en savoir plus, consultez le guide de l’élément personnalisé de Webflow. Cette petite merveille est notre billet d’entrée pour intégrer des vidéos pilotées par le CMS comme éléments d’arrière-plan. (Si vous voulez d’autres astuces de liaison au CMS, jetez un œil à notre article sur la création de spans de texte dans les éléments de texte CMS dynamiques.)
Concevoir votre vidéo d’arrière-plan pilotée par le CMS
Étape 1 : configurer votre collection CMS
Commencez par configurer une collection CMS qui contient vos fichiers vidéo. Voyez-la comme votre vidéothèque, où chaque livre est un récit captivant qui n’attend que d’être raconté. Il vous suffit des URL de téléchargement depuis Vimeo. Cliquez simplement sur les liens des fichiers vidéo dans Vimeo et passez aux liens de téléchargement plutôt qu’aux liens du lecteur, car les liens du lecteur expirent. (Une correction de 2026 : cette dernière raison ne tient plus. Vimeo indique que les liens de lecteur tiers (Liens de fichier vidéo, puis Lire la vidéo) n’expirent pas. Bon à savoir aussi : Vimeo ne fournit ces liens directs qu’à partir de son offre Standard, et si vous repassez à une offre inférieure, les liens que vous avez intégrés cessent de fonctionner jusqu’à ce que vous repassiez à une offre supérieure. Source : help.vimeo.com/hc/en-us/articles/12426150952593.) En général, on en ajoute trois pour chaque vidéo, même si une seule suffit : haute qualité, moyenne et basse. Allez-y doucement sur la haute, car une vidéo 4K peut tout simplement massacrer les performances du site. (Une correction de 2026 : les navigateurs ne choisissent pas la meilleure qualité à votre place. MDN indique : « Le navigateur parcourt une liste d’éléments <source> pour trouver un format qu’il prend en charge. Il utilise le premier qu’il peut afficher. » L’ordre de vos éléments source compte donc : placez en premier le fichier que vous voulez le plus voir lu.)
Étape 2 : mettre les éléments personnalisés au travail
La scène est prête : nous allons utiliser des éléments personnalisés pour créer une balise HTML5 <!-- fs-richtext-ignore --> <video> native, en liant dynamiquement nos éléments CMS. Imaginez faire apparaître un lecteur vidéo à partir de rien, grâce à la magie de Webflow et de votre CMS. Avec la configuration que je viens de décrire, il vous faudra quatre éléments personnalisés : la vidéo, et à l’intérieur trois éléments source.
Une fois la structure en place, vous allez définir la balise des quatre éléments : l’élément extérieur est video et les éléments intérieurs sont source.
Vous voyez ici que nous avons utilisé des attributs pour appliquer loop=true, muted=true et playsinline=true, et le reste n’est que du bonus. (Vous voudrez aussi autoplay=true sur la vidéo, car c’est lui qui la fait démarrer toute seule. Les navigateurs bloquent en général la lecture automatique des vidéos avec du son, c’est donc muted=true qui lui permet de démarrer toute seule.)
Vous voyez que nous utilisons des attributs pour lier l’URL au src. Cela, et le type, sont les plus importants.
Étape 3 : styliser et intégrer
Ensuite, nous allons styliser notre vidéo pour qu’elle s’intègre parfaitement comme élément d’arrière-plan, en veillant à ce qu’elle complète votre design sans l’écraser. C’est comme habiller votre vidéo de ses habits du dimanche. Pour le cloneable, nous avons créé une boîte au format 16:9 autour de la vidéo et réglé la vidéo en absolute et cover, de sorte qu’elle, eh bien, couvre la boîte, quelle que soit la taille de la vidéo. Cette partie dépend vraiment de ce que vous aviez prévu d’obtenir.
Récupérez le cloneable
Parce qu’on aime partager (et vous faire gagner du temps), nous avons préparé un projet Webflow cloneable. C’est comme vous remettre les clés du royaume : il suffit de le prendre, de le cloner et de le personnaliser à votre guise. Vous en trouverez d’autres du même genre dans nos cloneables Webflow.
Il y a aussi une vidéo à regarder où je baragouine à travers le cloneable, mais vous saurez vous débrouiller. Profitez-en, laissez un commentaire si vous avez des questions, on essaiera d’y répondre, et il y a plus d’informations sur la façon de faire la même chose avec du code personnalisé dans cet article. Vous cherchez une autre astuce pilotée par le CMS ? Jetez un œil à nos dégradés d’arrière-plan pilotés par le CMS ou à notre bandeau défilant piloté par le CMS.
Questions fréquentes
Puis-je utiliser un champ CMS pour une vidéo d’arrière-plan Webflow ?
Pas directement avec l’élément vidéo d’arrière-plan intégré. Webflow le décrit comme un composant dans lequel on téléverse un fichier vidéo, et non comme un élément alimenté par un champ CMS. L’approche par élément personnalisé ci-dessus contourne ce problème, car les URL des vidéos proviennent de votre élément de collection et les éléments y sont liés.
Quelle taille peut avoir une vidéo d’arrière-plan Webflow ?
La vidéo d’arrière-plan intégrée de Webflow accepte les fichiers de moins de 30 Mo aux formats webm, mp4, mov ou ogg. Avec la méthode de l’élément personnalisé, les fichiers sont hébergés sur Vimeo (ou ailleurs), donc cette limite ne s’applique pas, mais plus léger reste préférable : gardez des fichiers courts, compressés et en basse résolution.
Une vidéo d’arrière-plan CMS se lancera-t-elle automatiquement sur mobile ?
En général, tant que autoplay, muted et playsinline sont définis. Les navigateurs bloquent la lecture automatique des vidéos avec du son, c’est pourquoi muted est important. Gardez à l’esprit que le composant de vidéo d’arrière-plan de Webflow ajoute un bouton lecture/pause et s’arrête pour les visiteurs qui ont activé la réduction des animations, alors qu’une vidéo en élément personnalisé n’ajoute ni l’un ni l’autre d’elle-même : ajoutez donc votre propre commande de pause si la vidéo est grande ou distrayante.
