Créer des vidéos d'arrière-plan pilotées par le CMS dans les Collection Lists Webflow

Mise à jour, octobre 2026 : les choses ont évolué depuis que j'ai écrit cet article. La nouvelle approche est décrite dans Créer des vidéos d'arrière-plan pilotées par le CMS dans Webflow avec le Custom Element. Le reste de cet article reste en ligne comme trace de la façon dont nous procédions à l'époque.

Pourquoi voudrait-on faire ça ? Eh bien, vous voudrez peut-être, par exemple, une vidéo d'arrière-plan différente dans la section hero de la page modèle d'une Collection List CMS. Ou vous avez une Collection List sur une page et il vous faut une vidéo différente dans chaque élément. Pour nous, en tant que studio Webflow, c'était un projet récent pour un client : la section hero de la page d'accueil devait changer selon le jour de la semaine, avec une vidéo différente en arrière-plan chaque jour (nous expliquerons dans un prochain article comment lire la vidéo en fonction du jour de la semaine), puis cette même vidéo devait se retrouver sur la page de collection de l'occasion correspondante. Il fallait que ce soient les éléments du CMS qui déterminent la vidéo lue, mais nous ne pouvions pas le faire avec l'élément Background Video natif de Webflow, alors voici ce que nous avons fait :

Nous allons vous montrer comment ajouter l'arrière-plan à un élément CMS en téléversant la vidéo dans Webflow via un élément Background Video, comment utiliser un élément HTML Embed pour afficher la vidéo dans l'élément de la Collection List (sur la page modèle ou dans l'élément Collection List d'une page), et enfin comment masquer l'élément d'arrière-plan d'origine pour qu'il ne disparaisse pas à la publication. Milk Moon Studio est un petit studio Webflow, alors nous aimons les choses simples et low-code, et c'est ce que nous allons vous montrer.

Il y a deux écoles pour y arriver, et nous allons utiliser la première, mais vous pouvez essayer la seconde, alors voici les options.

1. Vous téléversez les vidéos que vous voulez utiliser dans Webflow via un élément Background Video qui finit masqué, de sorte que la vidéo reste dans votre projet. Cette approche permet, en quelque sorte, de continuer à profiter de la fonctionnalité native grâce à un petit détournement. Webflow transcodera quand même la vidéo et la produira en WebM et en MP4, vous utiliserez les deux et laisserez le navigateur de l'utilisateur choisir celui qu'il affiche selon ce qu'il prend en charge. Vous utiliserez aussi le CDN AWS de Webflow pour héberger le contenu dans les centres de données d'Amazon.
2. La deuxième approche fonctionne de la même façon pour la mise en place d'un embed et d'un champ qui référence la vidéo dans votre collection, mais vous n'hébergez pas la vidéo sur Webflow. Vous souscrivez plutôt un compte Vimeo. Cela vous permet de personnaliser les paramètres d'intégration, etc., puis de référencer la vidéo dans l'élément CMS. Au lieu d'utiliser une vidéo WebM ou MP4 transcodée par Webflow, vous ferez tourner en boucle une vidéo Vimeo en arrière-plan. Le code diffère un peu, nous y revenons à la fin de l'article. Nous avons récemment ajouté un article sur le contrôle et l'optimisation des vidéos d'arrière-plan Vimeo avec du code Intersection Observer, alors allez le consulter aussi.
3. Option 3, oui, nous avions dit deux, mais il y en a trois. Combinez les options une et deux. Prenez un compte Vimeo Pro pour obtenir les URL des vidéos sur Vimeo, puis utilisez le code d'intégration que nous fournissons pour l'option une avec les liens des vidéos Vimeo, sans utiliser les identifiants Vimeo comme dans l'option 2. Nous ne couvrirons pas celle-ci, vous vous débrouillerez.

Alors, lançons-nous avec la méthode Webflow :

Étape 1 : configurer votre collection CMS

Il vous faut deux champs, un pour l'URL de la vidéo MP4 et un pour celle de la vidéo WebM.

• Créez 2 champs de type texte brut, l'un nommé MP4, l'autre WebM.

Voilà pour la configuration de la Collection List du CMS. Vous pouvez bien sûr ajouter tous les autres champs dont vous aurez besoin dans la collection.

Étape 2 : configurer votre élément vidéo d'arrière-plan dans la page modèle CMS ou l'élément de la Collection List

• Rendez-vous dans l'élément où la vidéo doit apparaître. Ce peut être dans un élément de Collection List sur une page statique ou sur une page modèle CMS. Il vous faut un conteneur pour la vidéo, alors ajoutez une div, que nous appellerons video cover.
• Passez la div en position relative et dimensionnez-la comme vous l'auriez fait pour l'élément Background Video si vous aviez pu l'utiliser. Si vous comptez mettre du texte ou autre chose par-dessus la vidéo, l'élément qui contient cette div doit aussi être en position relative, pour pouvoir les empiler avec le z-index. Nous avons mis le conteneur vidéo à 1 et le contenu au-dessus à 2, ce qui les empile proprement, la vidéo restant en dessous.

Nous avons bien nommé tous les éléments dans la capture d'écran pour que vous voyiez comment nous les avons empilés. video cover est la div conteneur qui accueillera l'élément embed. Par-dessus, nous avons une couche de couleur noire à 20 % d'opacité pour rendre la compression un peu moins visible (nous en reparlons dans les conseils à la fin), et le texte se place au-dessus de cette couche. La couche de couleur rend aussi le texte plus lisible, car certaines de nos vidéos contiennent des éléments blancs. Notre div video cover est aussi en positionnement absolu avec une largeur et une hauteur de 100 %, car nous voulons qu'elle remplisse tout l'arrière-plan de la section hero de cette page.

• Maintenant, ajoutez un HTML Embed dans votre conteneur vidéo. Il contiendra le code qui fait fonctionner tout ça :

• Ajoutez le code suivant et sélectionnez les champs MP4 et WebM que vous avez créés plus tôt.

<iframe height="300" style="width: 100%;" scrolling="no" title="CMS powered background videos in Webflow - WebM and Mp4" src="https://codepen.io/milkmoonstudio/embed/ExpGNzB?default-tab=html%2Cresult&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/ExpGNzB">
CMS powered background videos in Webflow - WebM and Mp4</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Alors que se passe-t-il ici ? L'embed lit une vidéo d'arrière-plan en ligne, réglée en boucle. Si le navigateur prend en charge la vidéo HTML5 et le WebM, il choisira celui-ci, sinon il se rabattra sur la vidéo MP4.

Voilà pour la configuration du CMS, mais où trouver les URL des vidéos à ajouter aux éléments CMS de la Collection List ?

Étape 3 : récupérer les URL des vidéos

La partie moins amusante. Vous ne pouvez pas simplement téléverser les vidéos : Webflow doit les transcoder et les ajouter au CDN. Le plus simple pour cette étape est de créer une page statique, d'y déposer un élément Background Video pour chaque vidéo dont vous avez besoin, d'ajouter les vidéos à ces éléments et de publier la page. Allez sur la page publiée et inspectez le code. Chaque vidéo téléversée aura une URL MP4 et une URL WebM (attendez que les vidéos aient été compressées par Webflow avant de le faire). Copiez l'URL WebM et l'URL MP4 de chaque élément Background Video et collez-les dans les deux champs vidéo de l'élément CMS correspondant, ceux que vous avez créés à l'étape 1.

Très important : ne supprimez pas les éléments Background Video que vous venez de créer. Ils doivent rester dans Webflow aussi longtemps que vous avez besoin des vidéos dans le CMS. Passez simplement la page statique que vous avez créée en brouillon pour la retirer du projet en ligne, et tout ira bien. La page ne sera pas visible sur le site publié, mais les fichiers vidéo resteront.

Et voilà, c'est terminé, vous pouvez prévisualiser les vidéos publiées.

Conseils pour de meilleures vidéos d'arrière-plan

• COMPRESSEZ la vidéo à mort. Webflow va transcoder la vidéo et produire une version WebM, mais mieux vaut compresser au préalable. L'utilisabilité est essentielle, et vous ne voulez pas alourdir le navigateur de l'utilisateur, alors commencez petit. Nous recommandons Handbrake. C'est gratuit, et vous pouvez passer une journée à peaufiner les réglages jusqu'à obtenir ce que vous voulez. Beaucoup de gens conseillent de viser environ du 720p avec une faible cadence d'images, autour de 25 images par seconde, et des débits entre 750k et 1250k, puis de choisir le plus bas que vous jugez acceptable. Vous pouvez encore comprimer un peu et essayer les deux astuces suivantes une fois les vidéos ajoutées à Webflow.
• Couche de couleur. Il vous faut une grande vidéo, mais une fois ramenée à la taille voulue, elle n'est pas très belle. Posez une couche noire sur la vidéo, ajustez la transparence pour que la vidéo reste visible, mais que la couche adoucisse la compression appliquée.
• Flou. Même principe : posez une div au-dessus de l'élément vidéo et appliquez un flou pour adoucir les artefacts créés par la compression.
• Les motifs en surimpression peuvent aussi aider : réglez la transparence du motif au plus bas possible tout en masquant les artefacts.
• Si vous peinez à garder un poids léger, choisissez une vidéo très courte qui boucle parfaitement. Plus la vidéo est courte, plus elle est légère, et si le début et la fin s'enchaînent bien, la boucle se remarque moins.
• Évitez le mouvement, ce qui paraît contre-intuitif quand on ajoute une vidéo, qui contient par nature du mouvement. Nous parlons simplement des mouvements rapides, des vidéos tremblantes, ce genre de choses.
• Pour les plus aventureux, vous pouvez aussi mettre la vidéo en pause avec un peu de JavaScript après un certain nombre de boucles, ce qui allégera la charge du navigateur.
• Si le mobile vous inquiète, réglez la vidéo sur display: none sur mobile et utilisez à la place une image statique ou un très très petit gif (nous disons « jif »).
• Si vous n'êtes pas à l'aise avec Handbrake ou une application de compression similaire, Webflow recommande Clipchamp. Notez simplement qu'au moment où nous avons écrit ceci, le plan gratuit n'exportait qu'en SD, mais il exporte désormais jusqu'à 1080p.

La méthode Vimeo

Pour Vimeo, il vous faut un compte payant pour obtenir les identifiants nécessaires à l'embed, et il est plus difficile de lui faire couvrir une zone, car l'élément essaiera de conserver le format d'image d'origine. Pas de panique, l'astuce proposée ici fonctionne très bien, alors allez y jeter un œil. Nous l'avons utilisée aussi, avec un ajustement de temps en temps.

Il existe plusieurs implémentations Vimeo différentes pour le code HTML Embed. Cela ressemblera à peu près à ceci :

<iframe height="300" style="width: 100%;" scrolling="no" title="CMS powered background videos in Webflow - Vimeo Embeds" src="https://codepen.io/milkmoonstudio/embed/LYBMxVG?default-tab=html%2Cresult&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/LYBMxVG">
CMS powered background videos in Webflow - Vimeo Embeds</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Pensez à vérifier que la vidéo couvre bien la zone sur tous les points de rupture d'appareils.

Nous avons constaté que, si la méthode Vimeo affiche parfois de moins bons résultats de vitesse de page, le temps d'interaction, c'est-à-dire le moment où l'utilisateur peut réellement se servir du site, est un peu plus rapide avec Vimeo, mais la vidéo met un peu plus de temps à se charger à cause des iframes. Nous laissons aux experts Webflow le soin de décider quelle option ils préfèrent. 

Nous dirons tout de même qu'un élément vidéo fonctionne parfois mieux avec Vimeo. Quelque chose comme ceci :

<iframe height="300" style="width: 100%;" scrolling="no" title="Vimeo Background Video <video> element embed" src="https://codepen.io/milkmoonstudio/embed/LYMoGxm?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/LYMoGxm">
Vimeo Background Video <video> element embed</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Vous avez plus de contrôle, car le débit adaptatif de Vimeo, etc. n'entre pas en jeu. Sachez simplement que c'est un peu plus de travail : dans cet exemple, vous ajouterez trois URL Vimeo pour le fichier au lieu du seul identifiant Vimeo. Veillez aussi, en copiant les URL depuis la page Vimeo de votre vidéo, à utiliser les URL de téléchargement Vimeo et non les URL du lecteur Vimeo, car les URL du lecteur expirent au bout de 2 jours. Cliquez simplement sur le nom de la vidéo, récupérez les liens dans le menu déroulant, et n'oubliez pas : les URL de téléchargement. Ceux que vous choisirez dépendent de vous et de la qualité du fichier téléversé, vous opterez généralement pour un lien de haute, moyenne et basse qualité, mais vous pouvez en ajouter d'autres, à vous de voir.

Nous avons aussi créé un article plus récent consacré à la vidéo d'arrière-plan Vimeo et à l'utilisation du code Intersection Observer pour optimiser et contrôler les vidéos et d'autres éléments du site selon l'état de la vidéo, alors allez le consulter aussi. Mais pour les balises vidéo, vous pouvez utiliser le script Play and Pause de Finsweet pour optimiser les performances en lançant simplement les vidéos quand elles sont dans la zone d'affichage et en les mettant en pause quand elles en sortent.

Voilà pour la méthode avec la Collection List. Si vous préférez passer par le Custom Element, nous l'avons détaillée dans notre article plus récent sur les vidéos d'arrière-plan pilotées par le CMS avec le Custom Element. Et si ce genre d'astuce CMS vous plaît, nos articles sur les dégradés d'arrière-plan pilotés par le CMS dans Webflow et la création de spans de texte dans les éléments de texte CMS dynamiques vont dans le même sens.

Vos questions sur les vidéos dans Webflow

Comment téléverser une vidéo dans Webflow ?

Vous pouvez téléverser un fichier vidéo dans Webflow comme vidéo d'arrière-plan, mais pas dans l'élément Video standard. L'élément Video n'accepte que des liens de sites comme YouTube et Vimeo, alors que l'élément Background Video accepte des fichiers de moins de 30 Mo aux formats WebM, MP4, MOV ou OGG et les transcode en MP4 et en WebM pour vous. L'article d'aide de Webflow sur les styles d'arrière-plan donne tous les détails.

Comment ajouter une vidéo d'arrière-plan différente à chaque élément CMS dans Webflow ?

Ajoutez deux champs de texte brut à votre collection pour les URL MP4 et WebM, téléversez chaque vidéo une fois dans un élément Background Video sur une page que vous gardez en brouillon, puis collez les URL publiées dans les éléments CMS et lisez-les avec un HTML Embed placé dans l'élément de la Collection List. Les étapes 1 à 3 ci-dessus vous guident pas à pas.

Quelle taille doit avoir une vidéo d'arrière-plan Webflow ?

Gardez-la légère : environ 720p, autour de 25 images par seconde et un débit entre 750k et 1250k, compressée avant le téléversement. L'élément Background Video de Webflow a aussi une limite de 30 Mo par fichier, alors une vidéo courte qui boucle parfaitement est votre alliée.

Faut-il héberger les vidéos d'arrière-plan sur Webflow ou sur Vimeo ?

Cela dépend du projet, alors nous vous laissons choisir. Lors de nos tests, la méthode Vimeo affiche parfois de moins bons résultats de vitesse de page mais atteint le temps d'interaction un peu plus vite, tandis que la vidéo elle-même met un peu plus de temps à se charger à cause des iframes.

Si vous avez des questions, n'hésitez pas à laisser un commentaire, et si vous cherchez d'autres tutoriels, jetez un œil à notre section How-To.