Optimisation de la vidéo d'arrière-plan Vimeo dans Webflow

January 25, 2024

· 11 min

Dans cet article, nous allons examiner les vidéos d'arrière-plan de Vimeo dans Webflow et optimiser leurs performances à l'aide de code d'intersection d'objets. Nous expliquerons comment le code d'intersection d'objets peut être utilisé pour contrôler la lecture de la vidéo et déclencher des actions lorsque la vidéo apparaît à l'écran. Nous fournirons des exemples d'utilisation du code d'intersection d'objets pour améliorer l'expérience utilisateur, contrôler le chargement des vidéos et suspendre les vidéos dans les modes.

Nous avons récemment été chargés de concevoir et de construire un nouveau site pour une société de production vidéo, ce qui a entraîné l'utilisation à grande échelle de la vidéo d'arrière-plan. Finalement, nous avons préféré les vidéos d'arrière-plan Vimeo aux vidéos d'arrière-plan Webflow ou à des fournisseurs externes. Les fournisseurs externes étaient absents car ils proposaient déjà un service pour cela, mais les performances étaient... meh. La vidéo d'arrière-plan de Webflow a été publiée parce que :

C'est trop difficile pour le client de changer.
Nécessaire pour être facile à gérer, c'est-à-dire que les CMS et les vidéos d'arrière-plan Webflow ne gèlent pas.
Ils avaient déjà un compte Vimeo Pro contenant quelques centaines de chaînes de télévision, etc. que nous pouvions simplement importer dans le CMS Webflow avec leurs métadonnées, toutes leurs descriptions, leurs titres, etc.

La vidéo d'arrière-plan de Vimeo est étonnamment facile à implémenter dans Webflow :

Mais tout ce dont vous avez vraiment besoin, c'est que src ajoute l'identifiant Vimeo et la requête qui le suit pour le faire jouer, le mettre en boucle et le désactiver. Voici une explication du reste si vous souhaitez savoir exactement ce qui se passe :

Le code HTML crée un élément iframe avec l'identifiant « vimeo-video ». C'est ici que la vidéo Vimeo sera intégrée à la page. Ceci est important car notre premier observateur d'intersections d'objets recherchera « vimeo-video ».
L'attribut « loading » est réglé sur « eager », ce qui indique au navigateur de charger l'iframe et son contenu dès que possible, sans attendre le chargement du reste de la page. C'est au-dessus du pli, donc nous voulons que ce soit rapide.
L'attribut « préchargement » est réglé sur « auto », ce qui indique au navigateur de précharger le fichier vidéo afin qu'il puisse commencer à jouer dès que possible. Comme ci-dessus.
L'attribut « title » définit le titre de l'iframe sur « Name ».
L'attribut « src » est défini sur l'URL de la vidéo Vimeo avec des paramètres supplémentaires ajoutés. Le paramètre « background=1 » définit la vidéo pour qu'elle soit lue en tant que vidéo d'arrière-plan, et le paramètre « loop=1 » définit la vidéo pour qu'elle soit diffusée en boucle en continu. Le paramètre « autopause=0 » désactive le comportement par défaut du lecteur Vimeo qui consiste à faire une pause lorsque la vidéo n'est plus visible, et le paramètre « muted=1 » permet de configurer la lecture de la vidéo avec le son coupé. Le paramètre « quality=auto » permet de régler automatiquement la qualité vidéo en fonction de la vitesse de connexion de l'utilisateur. Le paramètre « responsive=1 » permet à la vidéo de réagir aux différentes tailles d'écran. Le paramètre « dnt=1 » configure le lecteur Vimeo pour qu'il respecte le paramètre « Do Not Track » du navigateur de l'utilisateur. Cela accélère les temps de chargement et aucune analyse n'est désormais suivie.
L'attribut « style » définit la couleur de fond de l'iframe sur le blanc.
Les attributs « largeur » et « hauteur » sont définis sur 100 % pour que l'iframe remplisse toute la largeur et la hauteur de son conteneur.
L'attribut « frameborder » est défini sur 0 pour supprimer la bordure autour de l'iframe.
L'attribut « autoriser » permet à l'iframe de se lancer automatiquement et de passer en mode plein écran.
L'attribut « allowfullscreen » permet à l'iframe de passer en mode plein écran.

Vous pouvez également utiliser un élément vidéo et nous avons en fait publié un article complet sur la vidéo d'arrière-plan ici si vous souhaitez en savoir plus sur l'ajout de cela à vos listes de collections. Les iframes et les éléments vidéo ont tous deux leurs avantages et leurs inconvénients.

Les intégrations Iframe sont un moyen courant d'intégrer des vidéos Vimeo sur un site Web et présentent certains avantages. L'un des principaux avantages est que les iframes sont chargés de manière asynchrone, ce qui signifie que le reste de la page peut être chargé indépendamment de la vidéo. Cela peut contribuer à améliorer les temps de chargement des pages, en particulier pour les connexions plus lentes. Cependant, le rendu des iframes peut également être plus lent et avoir un impact négatif sur les performances du site Web, en particulier si vous chargez de nombreuses vidéos de manière asynchrone et que vous utilisez des déclencheurs d'interaction tels que « page chargée », en particulier sur les appareils mobiles dotés de processeurs plus lents.

D'autre part, les intégrations d'éléments vidéo peuvent être plus performantes que les iframes car elles font partie du DOM de la page et peuvent être contrôlées plus directement avec JavaScript. Elles sont également faciles à mettre en cache. Cela signifie que l'intégration d'éléments vidéo peut être optimisée pour une lecture plus rapide et de meilleures performances, en particulier sur les appareils mobiles. Cependant, ils peuvent également être plus complexes à configurer et nécessiter plus de code pour les contrôler. Contrairement à un iframe Vimeo, vous pouvez simplement les remplir avec l'identifiant vidéo Vimeo.

Finalement, nous avons opté pour l'iframe car leur gestionnaire de réseaux sociaux gérerait le site. Il n'avait besoin que de l'identifiant vidéo Vimeo et du CMS Webflow, mais nous avions besoin de plus de contrôle pour optimiser l'expérience, tout d'abord, parce que nous pouvons faire des recommandations sur la taille et la qualité, rien ne garantit que quiconque les suivra, et ensuite parce que certaines pages destinées à leurs réalisateurs contenaient des centaines de vidéos d'arrière-plan qui bloqueraient facilement le navigateur terminal ou smartphone.

La solution, Object Intersect Code. Qu'est-ce que vous dites, et à juste titre ? Il est beaucoup utilisé, mais ce n'est pas quelque chose dont les personnes qui s'occupent du développement sans code doivent trop s'inquiéter. Nous affirmons toujours que Milk Moon Studio est d'abord un studio Webflow, que nous aimons qu'il y ait peu ou pas de code, et de toute façon, tout expert Webflow aime garder les choses simples.

Le code d'intersection d'objets est une technique utilisée dans le développement Web pour déclencher des actions lorsqu'un objet spécifique se croise ou apparaît à l'écran.

Dans le contexte des vidéos d'arrière-plan Vimeo dans Webflow, le code d'intersection d'objets peut être utilisé pour contrôler la lecture de la vidéo. Par exemple, vous souhaiterez peut-être que la vidéo s'arrête lorsqu'elle n'est plus visible, ou que la lecture ne commence que lorsqu'elle apparaît à l'écran.

En utilisant un code d'intersection d'objets, vous pouvez vous assurer que la lecture vidéo est optimisée pour vos utilisateurs et ne consomme pas inutilement les ressources de leur appareil. Il peut également améliorer l'expérience utilisateur globale en rendant la lecture vidéo plus fluide et plus réactive.

Le code d'intersection d'objets peut également être utilisé pour déclencher d'autres événements sur le site en fonction de l'état du lecteur vidéo Vimeo. Par exemple, vous pouvez utiliser le code pour détecter si la vidéo est en cours de lecture ou en pause, puis déclencher d'autres actions en fonction de cet état, telles que l'affichage ou le masquage d'autres éléments de la page ou le déclenchement d'animations.

Nous allons vous montrer comment nous avons utilisé le code d'intersection d'objets dans ce projet pour optimiser le site et contrôler d'autres éléments afin d'optimiser l'expérience utilisateur générale.

N'oubliez pas que vous allez devoir charger l'API du lecteur pour que tout cela fonctionne :

Utiliser le code Object Intersect comme déclencheur lorsqu'une vidéo Vimeo commence à jouer

Nous allons commencer par ce que nous avons fait sur la page d'accueil du site, en utilisant du code d'intersection d'objets pour contrôler d'autres éléments afin d'améliorer l'expérience utilisateur et les interactions temporelles avec le démarrage de la vidéo.

Pour planter le décor, nous avons une vidéo d'arrière-plan qui s'affiche derrière un logo défilant. Normalement, il est assez facile de chronométrer, de déclencher l'interaction lors du chargement de la page et le tour est joué, mais Webflow ne sait pas quand le chargement a été effectué. Ce sont les iframes qui se chargent de manière asynchrone. Nous avions donc besoin du code d'intersection d'objets pour regarder la vidéo en cours de lecture, puis de déclencher le logo défilant. Le code crée un effet de cadre de défilement sur une page Web à l'aide d'une animation CSS et déclenche l'animation lorsqu'une vidéo Vimeo est diffusée. Voici un aperçu de ce que fait le code :

Le code CSS met en place une classe « marquee-track » qui positionne un élément de texte de manière absolue et le fait défiler horizontalement à l'aide d'une animation CSS. L'animation est configurée pour fonctionner en sens inverse et durer 30 secondes. La classe est initialement définie pour avoir une opacité de 0 afin qu'elle soit masquée sur la page.
Le code JavaScript configure un écouteur d'événements qui attend que le lecteur Vimeo soit lancé. Lorsque l'événement play est déclenché, 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 complets et le script avec balisage pour l'expliquer un peu mieux, mais en plus de tout cela, il est facile d'utiliser l'observateur d'intersection d'objets pour déclencher, masquer ou afficher d'autres éléments, comme des chargeurs, etc.

Chargez en différé les vidéos d'arrière-plan de Vimeo lorsqu'elles sont dans la fenêtre d'affichage à l'aide de l'observateur d'intersections d'objets

Comme nous l'avons déjà dit, l'élément ci-dessus apporte plus d'expérience utilisateur, est esthétique, mais ne fait pas grand-chose en termes de performances. Le suivant est excellent pour améliorer les performances et c'est ce que nous avons utilisé sur les pages contenant des centaines de vidéos pour améliorer les performances globales des pages et les temps de chargement. L'un des inconvénients des Iframes est le niveau de contrôle direct lorsque vous utilisez simplement l'intégration. Le code ci-dessous vous permet de contrôler directement le moment où la vidéo commence même à se charger :

Le code HTML crée un conteneur vidéo avec l'identifiant « vimeo-video ». C'est ici que la vidéo Vimeo sera chargée sur la page. En gros, le même que l'iframe ci-dessus, mais avec un identifiant différent.
Le code JavaScript sélectionne tous les conteneurs vidéo de la page à l'aide de la méthode « QuerySelectorAll ».
L'objet « options » définit les paramètres de l'API IntersectionObserver. La propriété « root » est définie sur « null » pour utiliser la fenêtre d'affichage comme élément racine. La propriété « RootMargin » est définie sur « 0px » pour définir la marge autour de l'élément racine sur 0. La propriété « threshold » est définie sur 0,3 pour indiquer le pourcentage du conteneur vidéo qui doit être visible dans la fenêtre d'affichage avant que la vidéo ne commence à charger.
La variable « VideoObserver » crée une nouvelle instance d'IntersectionObserver avec une fonction de rappel qui s'exécute lorsqu'une intersection est observée. La fonction reçoit un tableau d' « entrées » et un objet « observateur ». Pour chaque entrée, la fonction vérifie si l'entrée croise la fenêtre d'affichage à l'aide de la propriété « IsIntersecting ». Si c'est le cas, la fonction obtient l'iframe vidéo Vimeo à l'intérieur du conteneur à l'aide de la méthode « QuerySelector », récupère l'URL de la source vidéo à partir de l'attribut « data-src » à l'aide de la méthode « getAttribute », définit l'attribut iframe « src » sur l'URL récupérée à l'aide de la méthode « setAttribute » et arrête d'observer le conteneur à l'aide de la méthode « unobserve ».
La variable « VideoContainers » est itérée à l'aide de la méthode « forEach » pour accéder à chaque conteneur individuellement. Pour chaque conteneur, la fonction obtient l'iframe vidéo Vimeo à l'intérieur du conteneur à l'aide de la méthode « QuerySelector », récupère l'URL de la source vidéo à partir de l'attribut « src » à l'aide de la méthode « getAttribute », définit l'attribut « data-src » sur l'URL récupérée à l'aide de la méthode « setAttribute », supprime l'attribut « src » à l'aide de la méthode « removeAttribute » et commence à observer le conteneur à l'aide de la méthode « observe » de l'API IntersectionObserver.

L'avantage, c'est que vous supprimez et ajoutez l'URL src, ce qui signifie que les vidéos qui ne sont pas dans la fenêtre d'affichage ne peuvent pas du tout se charger, libérant ainsi des ressources uniquement pour celles qui le sont.

Utiliser le lecteur Vimeo pour suspendre les vidéos Vimeo lorsque vous fermez un modal

Ce dernier, je vais juste le mettre ici. C'est juste un moyen utile de contrôler l'API du joueur, et non de l'intersecter directement en fonction de l'observateur. Le problème, que faites-vous lorsque vous avez une vidéo Vimeo dans un modal. Lorsque vous jouez, tout va bien, mais si vous fermez simplement le modal, la vidéo continue de fonctionner correctement. Il ne s'agit pas d'un élément vidéo Webflow, mais d'une intégration Vimeo normale, donc Webflow n'a aucun contrôle dessus. Et c'est exactement ce qui nous est arrivé lorsque nous avions un modal dans un slider. Vous cliquez sur un côté, ce qui ouvre le modal, mais lorsque vous fermez le modal, le curseur continue, tout comme la vidéo, quelque part en arrière-plan. Personne ne veut ça.

Tout ce dont nous avions besoin, c'était de ceci pour mettre la vidéo en pause :

Le code HTML crée une vidéo modale avec un bouton de fermeture. C'est ici que la vidéo Vimeo sera diffusée sur la page.
Le code JavaScript sélectionne tous les boutons de fermeture de la page à l'aide de la méthode « QuerySelectorAll ».
La variable « CloseButtons » est itérée à l'aide de la méthode « forEach » pour accéder à chaque bouton individuellement. Pour chaque bouton, la fonction ajoute un écouteur d'événements de clic à l'aide de la méthode « addEventListener ».
La fonction d'écoute d'événements obtient tous les modaux vidéo de la page à l'aide de la méthode « QuerySelectorAll » et du sélecteur de classe « .modal-video ».
La variable « ModalVideos » est itérée à l'aide de la méthode « forEach » pour accéder à chaque mode vidéo individuellement. Pour chaque mode vidéo, la fonction récupère l'iframe vidéo Vimeo dans le modal à l'aide de la propriété « ContentWindow », qui accède à l'objet fenêtre de l'iframe, et de la méthode « PostMessage ». La méthode « PostMessage » envoie un message à l'iframe, qui dans ce cas est un objet JSON dont la propriété « method » est définie sur « pause ». Cela met la vidéo Vimeo en pause lorsque le modal est fermé.

Dans l'ensemble, ce code garantit que la vidéo Vimeo contenue dans le modal est suspendue lorsque le modal est fermé en utilisant la méthode « postMessage » pour envoyer un message à l'iframe avec la méthode « pause ». Cela empêche la lecture de la vidéo en arrière-plan et d'utiliser des ressources inutiles sur la page.

Dans l'ensemble, voici quelques manières intéressantes d'utiliser l'observateur d'intersection d'objets pour optimiser le contenu vidéo d'arrière-plan dans Webflow, ainsi que la façon de suspendre une vidéo lorsqu'un modal est fermé. Nous espérons que cela vous donnera de l'inspiration pour votre prochain projet, et pour en savoir plus sur les vidéos d'arrière-plan alimentées par CMS, consultez cet article. Vous pouvez également trouvez notre section pratique ici avec tous les articles et vidéos pratiques que nous avons créés, nous essayons de le faire en sorte que le code soit faible, simple et Flux Web lié. Il y a aussi un bon guide sur l'observateur d'intersection d'objets ici, avec une belle vidéo si vous souhaitez l'utiliser pour autre chose que la vidéo.

Optimisation des vidéos d'arrière-plan Vimeo dans Webflow à l'aide du code d'intersection d'objets pour des performances améliorées

Utiliser le code Object Intersect comme déclencheur lorsqu'une vidéo Vimeo commence à jouer

Chargez en différé les vidéos d'arrière-plan de Vimeo lorsqu'elles sont dans la fenêtre d'affichage à l'aide de l'observateur d'intersections d'objets

Utiliser le lecteur Vimeo pour suspendre les vidéos Vimeo lorsque vous fermez un modal

Partagez

Toutes les publications

Dance of the Dots : chorégraphie de commandes de curseur personnalisées dans Webflow

Boostez votre référencement en créant des pages de destination programmatiques Webflow qui ciblent vos concurrents

Utilisation de Webflow avec Cloudflare pour mettre en cache et accélérer votre projet Webflow

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