Vidéo d’arrière-plan Vimeo dans Webflow : optimisez le chargement

Nous avons récemment conçu et développé un nouveau site pour une société de production vidéo, ce qui a entraîné un usage massif de vidéos d’arrière-plan. Nous avons finalement choisi les vidéos d’arrière-plan Vimeo plutôt que la vidéo d’arrière-plan native de Webflow ou des hébergeurs externes. Les hébergeurs externes étaient exclus : le client avait déjà un service de ce type, mais les performances étaient… moyennes. La vidéo d’arrière-plan Webflow était exclue pour plusieurs raisons :

Trop compliquée à modifier pour le client.
Elle devait rester simple à gérer, c’est-à-dire via le CMS, et la vidéo d’arrière-plan Webflow s’accorde mal avec le CMS.
Le client avait déjà un compte Vimeo Pro avec quelques centaines de publicités TV et autres vidéos que nous pouvions simplement importer dans le CMS Webflow avec leurs métadonnées, descriptions, titres, etc.

Mettre en place une vidéo d’arrière-plan Vimeo dans Webflow est étonnamment simple :

Mais tout ce dont vous avez vraiment besoin, c’est du src : ajoutez l’identifiant Vimeo et les paramètres qui le suivent pour que la vidéo se lance, tourne en boucle et reste muette. Voici une explication du reste, si vous voulez savoir précisément ce qui se passe :

Le code HTML crée un élément iframe avec l’ID "vimeo-video". C’est là que la vidéo Vimeo sera intégrée à la page. C’est important, car notre premier observateur d’intersection va chercher « vimeo-video ».
L’attribut "loading" vaut "eager", ce qui indique au navigateur de charger l’iframe et son contenu dès que possible, sans attendre le reste de la page. Elle se trouve en haut de page, donc on la veut rapide.
L’attribut "preload" vaut "auto", ce qui indique au navigateur de précharger le fichier vidéo pour qu’il puisse démarrer au plus vite. Même logique que ci-dessus.
L’attribut "title" définit le titre de l’iframe sur "Name".
L’attribut "src" contient l’URL de la vidéo Vimeo avec des paramètres supplémentaires. Le paramètre "background=1" lance la vidéo en mode arrière-plan, et "loop=1" la fait tourner en boucle. Le paramètre "autopause=0" empêche le lecteur Vimeo de mettre cette vidéo en pause quand une autre vidéo Vimeo de la même page démarre (par défaut, le lecteur ne joue qu’une vidéo à la fois), et "muted=1" lance la vidéo sans le son. Le paramètre "quality=auto" ajuste automatiquement la qualité selon la vitesse de connexion de l’utilisateur. "responsive=1" rend la vidéo adaptable aux différentes tailles d’écran. Enfin, "dnt=1" empêche le lecteur Vimeo de collecter des données de session et des statistiques, donc aucune analyse n’est suivie (Vimeo précise que certains cookies essentiels restent actifs).
L’attribut "style" définit la couleur d’arrière-plan de l’iframe sur blanc.
Les attributs "width" et "height" valent 100 % pour que l’iframe remplisse toute la largeur et la hauteur de son conteneur.
L’attribut "frameborder" vaut 0 pour supprimer la bordure autour de l’iframe.
L’attribut "allow" autorise l’iframe à lancer la lecture automatique et à passer en plein écran.
L’attribut "allowfullscreen" autorise l’iframe à passer en plein écran.

Vous pouvez aussi utiliser un élément Vidéo, et nous avons d’ailleurs publié un article complet sur les vidéos d’arrière-plan pilotées par le CMS si vous voulez plus de détails sur leur ajout à vos listes de collection. Les iframes et les éléments Vidéo ont chacun leurs avantages et leurs inconvénients.

Les iframes sont une façon courante d’intégrer des vidéos Vimeo sur un site, et elles offrent plusieurs avantages. L’un des principaux est que les iframes se chargent de façon asynchrone : le reste de la page peut donc se charger indépendamment de la vidéo. Cela peut améliorer les temps de chargement, surtout sur les connexions lentes. En revanche, les iframes peuvent aussi être plus lentes à s’afficher et nuire aux performances du site, surtout si vous chargez beaucoup de vidéos en asynchrone et que vous utilisez des déclencheurs d’interaction comme « page chargée », en particulier sur mobile avec des processeurs plus lents.

À l’inverse, les éléments vidéo peuvent être plus performants que les iframes, car ils font partie du DOM de la page et peuvent être pilotés plus directement avec JavaScript, et ils se mettent aussi facilement en cache. Ils peuvent donc être optimisés pour une lecture plus rapide et de meilleures performances, surtout sur mobile. Mais ils sont aussi plus complexes à mettre en place, demandent plus de code pour être contrôlés et, contrairement à une iframe Vimeo, on ne peut pas se contenter de leur donner l’identifiant de la vidéo Vimeo.

Au final, nous avons opté pour l’iframe, car leur responsable des réseaux sociaux allait s’occuper du site et il n’aurait besoin que de l’identifiant Vimeo et du CMS Webflow. Mais il nous fallait plus de contrôle pour optimiser l’expérience, d’abord parce que nous pouvons faire des recommandations de taille et de qualité sans aucune garantie qu’elles soient suivies, ensuite parce que certaines pages de leurs réalisateurs contenaient des centaines de vidéos d’arrière-plan, de quoi saturer facilement le navigateur d’un ordinateur d’entrée de gamme ou d’un smartphone.

La solution : le code d’intersection d’objets. De quoi s’agit-il ? La question est légitime. On l’utilise beaucoup, mais ce n’est pas vraiment un sujet dont les adeptes du no-code ont à se soucier. Nous répétons toujours que Milk Moon Studio est avant tout un studio Webflow : nous aimons le low-code et le no-code, et de toute façon, tout expert Webflow préfère garder les choses simples.

Le code d’intersection d’objets est une technique de développement web qui déclenche des actions lorsqu’un objet précis croise la zone visible de l’écran ou y entre.

Schéma d’une zone d’affichage : le conteneur vidéo Vimeo à l’intérieur se charge, les deux conteneurs à l’extérieur n’ont pas de src et ne se chargent pas

Dans le cas des vidéos d’arrière-plan Vimeo dans Webflow, il permet de contrôler la lecture de la vidéo. Par exemple, vous pouvez la mettre en pause quand elle sort de l’écran, ou ne la lancer que lorsqu’elle y entre.

Avec ce code, vous vous assurez que la lecture vidéo est optimisée pour vos utilisateurs et ne pompe pas inutilement les ressources de leur appareil. Il peut aussi améliorer l’expérience globale en rendant la lecture plus fluide et plus réactive.

Le code d’intersection d’objets ne fait que dire ce qui est à l’écran. Combiné à l’API du lecteur Vimeo, qui sait si la vidéo est en lecture ou en pause, il permet de déclencher d’autres événements sur le site selon l’état du lecteur. Vous pouvez par exemple utiliser l’API du lecteur pour détecter si la vidéo est en lecture ou en pause, puis déclencher d’autres actions en conséquence, comme afficher ou masquer d’autres éléments de la page, ou lancer des animations.

Nous allons vous montrer quelques façons dont nous avons utilisé ce code d’intersection d’objets dans ce projet pour optimiser le site et piloter d’autres éléments afin d’améliorer l’expérience utilisateur en général.

N’oubliez pas que vous devrez charger l’API du lecteur pour que tout cela fonctionne :

Utiliser l’API du lecteur Vimeo comme déclencheur au démarrage d’une vidéo

Commençons par ce que nous avons fait sur la page d’accueil du site : utiliser l’API du lecteur Vimeo pour piloter d’autres éléments, améliorer l’expérience utilisateur et synchroniser les interactions avec le démarrage de la vidéo.

Pour planter le décor, nous avons une vidéo de showreel en arrière-plan derrière un logo défilant. Normalement, la synchronisation est assez simple : on déclenche l’interaction au chargement de la page et c’est réglé. Mais Webflow ne sait pas quand la vidéo est chargée, car les iframes se chargent de façon asynchrone. Il nous a donc fallu l’API du lecteur Vimeo pour surveiller la lecture de la vidéo, puis lancer le logo défilant. Le code met en place un effet de bandeau défilant sur une page web grâce à une animation CSS, et déclenche l’animation lorsqu’une vidéo Vimeo est lue. Voici ce que fait le code, en détail :

Le code CSS définit une classe "marquee-track" qui positionne un élément texte en absolu et le fait défiler horizontalement avec une animation CSS. L’animation est lue en sens inverse et dure 30 secondes. La classe a au départ une opacité de 0, pour que l’élément soit masqué sur la page.
Le code JavaScript met en place un écouteur d’événement qui attend la lecture du lecteur Vimeo. Quand l’événement play se produit, le JavaScript ajoute la classe "start" à l’élément "marquee-track", ce qui déclenche l’animation CSS et fait défiler le texte sur la page.

Voici les styles et le script complets avec le balisage, pour mieux comprendre. L’essentiel, c’est de voir combien il est facile d’utiliser les événements du lecteur Vimeo, avec l’observateur d’intersection, pour déclencher, masquer ou afficher d’autres éléments, comme des loaders.

Charger les vidéos d’arrière-plan Vimeo en différé quand elles sont dans le viewport avec l’observateur d’intersection

Comme nous l’avons dit, l’exemple précédent améliore surtout l’expérience utilisateur et l’esthétique, mais pas beaucoup les performances. Celui-ci est excellent pour les performances : c’est ce que nous avons utilisé sur les pages contenant des centaines de vidéos pour améliorer les performances globales et les temps de chargement. L’un des inconvénients des iframes est le manque de contrôle direct quand on utilise simplement l’intégration, donc le code ci-dessous vous donne la main sur le moment où la vidéo commence à se charger :

Le code HTML crée un conteneur vidéo avec l’ID "vimeo-video". C’est là que la vidéo Vimeo sera chargée sur la page. C’est en gros la même chose que l’iframe ci-dessus, mais avec un ID différent.
Le code JavaScript sélectionne tous les conteneurs vidéo de la page avec la méthode "querySelectorAll".
L’objet "options" définit les paramètres de l’API IntersectionObserver. La propriété "root" vaut "null" pour utiliser le viewport comme élément racine. La propriété "rootMargin" vaut "0px" pour une marge de 0 autour de l’élément racine. La propriété "threshold" vaut 0.3, ce qui indique la proportion (30 %) du conteneur vidéo qui doit être visible dans le viewport avant que la vidéo commence à se charger.
La variable "videoObserver" crée une nouvelle instance d’IntersectionObserver avec une fonction de rappel exécutée à chaque intersection observée. La fonction reçoit un tableau "entries" et un objet "observer". Pour chaque entrée, elle vérifie si l’entrée croise le viewport grâce à la propriété "isIntersecting". Si c’est le cas, elle récupère l’iframe Vimeo dans le conteneur avec la méthode "querySelector", lit l’URL source de la vidéo dans l’attribut "data-src" avec la méthode "getAttribute", affecte cette URL à l’attribut "src" de l’iframe avec la méthode "setAttribute", puis cesse d’observer le conteneur avec la méthode "unobserve".
La variable "videoContainers" est parcourue avec la méthode "forEach" pour accéder à chaque conteneur individuellement. Pour chacun, la fonction récupère l’iframe Vimeo à l’intérieur avec la méthode "querySelector", lit l’URL source de la vidéo dans l’attribut "src" avec la méthode "getAttribute", affecte cette URL à l’attribut "data-src" avec la méthode "setAttribute", supprime l’attribut "src" avec la méthode "removeAttribute", puis commence à observer le conteneur avec la méthode "observe" de l’API IntersectionObserver.

Le plus malin, c’est que vous retirez et ajoutez l’URL du src, ce qui signifie que les vidéos hors du viewport ne peuvent pas se charger du tout, libérant des ressources pour celles qui sont visibles.

Utiliser le lecteur Vimeo pour mettre une vidéo en pause à la fermeture d’une modale

Celle-ci, je la glisse simplement ici. C’est une façon utile de piloter l’API du lecteur, sans lien direct avec l’observateur d’intersection. Le problème : que faire quand on a une vidéo Vimeo dans une modale ? À la lecture, tout va bien, mais si on ferme simplement la modale, la vidéo continue, non ? Ce n’est pas un élément vidéo Webflow, juste une intégration Vimeo classique, donc Webflow n’a aucun contrôle dessus. C’est exactement ce qui nous est arrivé avec une modale dans un slider. On clique sur une diapositive, ce qui ouvre la modale, mais quand on ferme la modale, le slider continue de défiler et la vidéo aussi, quelque part en arrière-plan. Personne n’en veut.

Il nous suffisait de ceci pour mettre la vidéo en pause :

Le code HTML crée une modale vidéo avec un bouton de fermeture. C’est là que la vidéo Vimeo sera lue sur la page.
Le code JavaScript sélectionne tous les boutons de fermeture de la page avec la méthode "querySelectorAll".
La variable "closeButtons" est parcourue avec la méthode "forEach" pour accéder à chaque bouton individuellement. Pour chacun, la fonction ajoute un écouteur d’événement de clic avec la méthode "addEventListener".
La fonction de l’écouteur récupère toutes les modales vidéo de la page avec la méthode "querySelectorAll" et le sélecteur de classe ".modal-video".
La variable "modalVideos" est parcourue avec la méthode "forEach" pour accéder à chaque modale vidéo individuellement. Pour chacune, la fonction accède à l’iframe Vimeo à l’intérieur grâce à la propriété "contentWindow", qui donne l’objet window de l’iframe, et à la méthode "postMessage". Cette méthode envoie un message à l’iframe, ici un objet JSON dont la propriété "method" vaut "pause". Cela met la vidéo Vimeo en pause à la fermeture de la modale.

Au final, ce code garantit que la vidéo Vimeo de la modale est mise en pause à sa fermeture, en envoyant à l’iframe un message avec la méthode "pause" via "postMessage". Cela évite que la vidéo continue de tourner en arrière-plan et de consommer des ressources inutilement sur la page.

Si vous préférez vous passer complètement de l’iframe, nous avons aussi écrit sur les vidéos d’arrière-plan pilotées par le CMS avec le Custom Element, qui vous donne un élément vidéo HTML5 natif. Et si la vitesse de page vous intéresse plus largement, jetez un œil à pourquoi la vitesse de page fait le succès d’une entreprise et à notre guide du proxy d’assets et de l’optimisation avec Cloudflare.

Questions fréquentes sur les vidéos Vimeo dans Webflow

Comment ajouter une vidéo Vimeo dans Webflow ?

Déposez un élément Embed sur la page et collez-y une iframe Vimeo avec l’identifiant de votre vidéo dans le src, ou utilisez l’élément Vidéo de Webflow en lui donnant le lien Vimeo. Pour une vidéo d’arrière-plan, nous préférons l’iframe, car elle permet d’ajouter des paramètres au src, et c’est sur cela que repose tout le reste de cet article.

Comment lire une vidéo Vimeo en arrière-plan ?

Ajoutez le paramètre "background=1" à la fin du src de la vidéo. Selon Vimeo, il désactive les commandes du lecteur, met la vidéo en boucle, la lance automatiquement et la coupe du son. Notez toutefois que, selon Vimeo, la vidéo doit être hébergée sur un compte Starter ou supérieur : un compte gratuit ne suffira pas.

Comment charger en différé des vidéos d’arrière-plan Vimeo dans Webflow ?

Remplacez le "src" de l’iframe par un "data-src" et laissez un Intersection Observer remettre le src dès que le conteneur est visible à environ 30 %. Les vidéos loin du viewport ne se chargent jamais, et c’est ce qui nous a sauvés sur les pages qui en comptaient des centaines.

Comment mettre une vidéo Vimeo en pause à la fermeture d’une modale ?

Envoyez à l’iframe Vimeo un message "pause" avec postMessage au clic sur votre bouton de fermeture, exactement comme dans le CodePen ci-dessus. Webflow ne peut pas arrêter une intégration Vimeo classique à votre place : c’est à vous de le dire au lecteur.

Voilà donc quelques façons intéressantes d’utiliser l’observateur d’intersection pour optimiser les vidéos d’arrière-plan dans Webflow, ainsi qu’une méthode pour mettre une vidéo en pause à la fermeture d’une modale. Nous espérons que cela vous inspirera pour votre prochain projet, et pour en savoir plus sur les vidéos d’arrière-plan pilotées par le CMS, consultez cet article. Vous pouvez aussi retrouver notre rubrique how-to ici avec tous les articles et vidéos pratiques que nous avons créés : nous essayons de rester dans le low-code, simple et lié à Webflow. Il existe aussi un bon guide de l’observateur d’intersection ici, avec une vidéo très bien faite si vous voulez l’utiliser pour autre chose que des vidéos.

Optimiser les vidéos d’arrière-plan Vimeo dans Webflow avec l’Intersection Observer

Utiliser l’API du lecteur Vimeo comme déclencheur au démarrage d’une vidéo

Charger les vidéos d’arrière-plan Vimeo en différé quand elles sont dans le viewport avec l’observateur d’intersection

Utiliser le lecteur Vimeo pour mettre une vidéo en pause à la fermeture d’une modale

Questions fréquentes sur les vidéos Vimeo dans Webflow

Comment ajouter une vidéo Vimeo dans Webflow ?

Comment lire une vidéo Vimeo en arrière-plan ?

Comment charger en différé des vidéos d’arrière-plan Vimeo dans Webflow ?

Comment mettre une vidéo Vimeo en pause à la fermeture d’une modale ?

Partagez

Toutes les publications

Créer une taille de police Webflow qui s'adapte à la largeur et à la hauteur du viewport

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

Ajouter des analyses comportementales gratuites avec Tag Manager et Microsoft Clarity

Les rebelles de la conception Web s'unissent. Inscrivez-vous à notre newsletter.