Création de vidéos d'arrière-plan alimentées par un CMS dans Webflow

Pourquoi demandez-vous si vous voudriez faire cela. Par exemple, vous souhaiterez peut-être qu'une vidéo d'arrière-plan différente soit diffusée dans la section héros de la page modèle d'une liste de CMS Collection. Il se peut que vous ayez une liste de collections sur une page et que vous ayez besoin d'une vidéo différente pour chaque article. Pour nous, en tant que studio Webflow, il s'agissait d'un projet récent pour un client où nous avions besoin que la section héros de la page d'accueil change en fonction du jour de la semaine et qu'une vidéo différente soit diffusée comme élément de fond chaque jour. (plus d'informations sur la façon dont nous avons configuré la vidéo pour qu'elle soit diffusée en fonction du jour de la semaine dans un prochain article), puis la même vidéo sera diffusée sur la page de liste des collections de l'occasion. Nous avions besoin des éléments du CMS pour déterminer quelle vidéo était en cours de diffusion, mais nous ne pouvions pas le faire avec l'élément vidéo d'arrière-plan disponible dans Webflow. Nous avons donc procédé comme suit :

Nous allons vous montrer comment ajouter l'arrière-plan à un élément CMS en le téléchargeant sur Webflow dans un élément vidéo d'arrière-plan. Nous allons utiliser un élément HTML intégré pour placer la vidéo dans l'élément de la liste des collections CMS de la page modèle ou dans l'élément de liste des collections d'une page, puis nous allons simplement masquer l'élément d'arrière-plan d'origine afin qu'il ne disparaisse pas une fois que vous avez publié. Milk Moon Studio est un petit studio Webflow, nous aimons donc les choses simples et peu codées, et c'est ce que nous allons vous montrer.

Il existe cependant deux écoles de pensée sur la façon de procéder, et nous allons utiliser la première, mais vous pouvez essayer la seconde, donc nous les listerons.

1. Vous téléchargez les vidéos que vous souhaitez utiliser sur Webflow dans un élément vidéo d'arrière-plan qui finit par se masquer afin que la vidéo reste dans votre projet. Cette approche vous permet, dans un sens, de continuer à utiliser la fonctionnalité native avec quelques astuces. Webflow transcodera toujours la vidéo et la sortira au format Webm et MP4. Vous utiliserez les deux et laisserez le navigateur de l'utilisateur décider lequel afficher sur la page en fonction de ce qu'il prend en charge. Vous utiliserez également 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 manière lorsqu'il s'agit de configurer et d'intégrer un champ pour référencer la vidéo dans votre liste de collections, mais vous n'hébergez pas la vidéo sur Webflow. Vous pouvez plutôt acheter un compte vidéo. Cela vous permettra 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 diffuserez une vidéo Vimeo en arrière-plan. Le code diffère un peu, plus d'informations à ce sujet à la fin de l'article. Nous avons récemment ajouté un article sur contrôler et optimiser l'intégration de la vidéo d'arrière-plan de Vimeo avec le code Object Intersect Observer, alors vérifiez-le également.
3. Option 3, oui, nous avons dit deux, mais il y en a trois. Combinez les options 1 et 2. Achetez un compte Vimeo Pro pour obtenir les URL des vidéos sur Vimeo, puis utilisez le code intégré que nous fournissons pour la première option avec les liens vidéo Vimeo et n'utilisez pas les identifiants Vimeo comme vous le feriez dans les options 2. Nous n'allons pas couvrir celui-ci, tu trouveras une solution.

Commençons donc par la méthode Webflow :

Étape 1 - Configurez votre collection CMS

Vous aurez besoin de deux champs, l'un pour l'URL de la vidéo MP4 et l'autre pour la vidéo WebM.

• Créez 2 champs, du texte brut, l'un appelé MP4, l'autre Webm.

La configuration de la liste de collections CMS est terminée. Bien entendu, vous pouvez ajouter tous les autres champs dont vous aurez besoin dans la liste de collection

Étape 2 - Configurez votre élément vidéo d'arrière-plan dans la page du modèle CMS ou dans l'élément de la liste de collection

• Dirigez-vous vers l'élément dans lequel vous souhaitez que la vidéo apparaisse. Cela peut se trouver dans un élément de liste de collection sur une page statique ou sur une page modèle de CMS. Vous allez avoir besoin d'un emballage pour la vidéo, alors ajoutez div, nous allons l'appeler couverture vidéo.
• Définissez le div sur relatif et dimensionnez comme vous auriez dimensionné l'élément vidéo d'arrière-plan si vous aviez pu l'utiliser. Si vous voulez avoir du texte ou quoi que ce soit d'autre sur la vidéo, vous voudrez également que l'élément dans lequel se trouve ce div soit défini sur relatif afin que vous puissiez les empiler en utilisant z-index. Nous avons réglé le wrapper vidéo sur 1 et le contenu situé au-dessus sur 2 afin que nous puissions les empiler correctement. La vidéo est ci-dessous.

Nous avons bien nommé tout dans la capture d'écran pour que vous puissiez voir comment nous les avons empilés. La couverture vidéo est le wrapper div qui contiendra l'élément d'intégration. Nous avons une superposition de couleurs avec une opacité noire de 20 % pour rendre la compression un peu moins évidente (plus d'informations à ce sujet dans les conseils à la fin) et la copie se trouve au-dessus. La superposition de couleurs rend également le texte plus lisible, car certaines de nos vidéos contiennent des éléments blancs. Notre div de couverture vidéo est également réglé sur Positionnement absolu avec une largeur et une hauteur de 100 %. Nous voulons qu'il remplisse tout l'arrière-plan de la section Hero de cette page.

• Maintenant, allez-y et déposez une intégration HTML dans votre emballage vidéo. Cela contiendra le code qui permet à tout cela de fonctionner correctement :

• Ajoutez le code suivant et sélectionnez les champs MP4 et WebM que vous avez créés précédemment.

<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">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/ExpGNzB">
</a><a href="https://codepen.io/milkmoonstudio">Vidéos d'arrière-plan alimentées par un CMS dans Webflow - WebM et Mp4 par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>

Alors, que se passe-t-il ici ? L'intégration diffusera une vidéo d'arrière-plan en ligne configurée en boucle. Si le navigateur prend en charge la vidéo HTML5 et WebM, il choisira cette option, sinon il utilisera par défaut la vidéo MP4.

C'est tout pour la configuration du CMS, mais où trouvons-nous les URL des vidéos que nous devons ajouter aux éléments du CMS dans la liste de collection ?

Étape 3 - Obtenez les URL des vidéos.

La partie qui n'est pas si drôle. Vous ne pouvez pas simplement télécharger les vidéos, Webflow doit les transcoder et les ajouter au CDN. Le moyen le plus simple de terminer cette étape est de créer une page statique, d'ajouter un élément vidéo d'arrière-plan pour chaque vidéo dont vous avez besoin, d'ajouter les vidéos auxdits éléments vidéo d'arrière-plan et de publier la page. Accédez à la page publiée, inspectez le code. Chaque vidéo que vous avez mise en ligne aura une URL MP4 et WebM (attendez que les vidéos soient compressées dans Webflow avant de procéder). Copiez les URL WebM et MP4 pour chaque élément vidéo d'arrière-plan et collez l'URL dans les deux champs vidéo de l'élément CMS correspondant que vous avez créés à l'étape 1.

Très important, ne supprimez pas l'élément vidéo d'arrière-plan que vous venez de créer. Ils doivent rester dans Webflow aussi longtemps que vous avez besoin des vidéos du CMS. Il suffit de changer la page statique que vous avez créée en brouillon pour la supprimer du projet en direct et tout ira bien. La page ne sera pas visible sur le site publié, mais les ressources vidéo seront conservées.

Voilà, vous avez terminé, allez-y et prévisualisez les vidéos publiées.

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

• COMPRESSEZ tout ce qu'il y a de vivant dans la vidéo. Webflow va transcoder la vidéo et créer une version WebM, mais vous devez commencer à compresser au préalable. La convivialité est essentielle et vous ne voulez pas que cela fasse glisser le navigateur de l'utilisateur vers le bas, alors commencez petit. Nous recommandons Frein à main, c'est gratuit et vous pouvez passer une journée à peaufiner les paramètres jusqu'à obtenir ce que vous voulez. Nous avons vu beaucoup de personnes dire que vous devriez viser environ 720p avec une faible fréquence d'images d'environ 25 images par seconde et des débits compris entre 750 000 et 1 250 000, avant de choisir la plus basse qui vous semble acceptable. Vous pouvez le réduire un peu plus et essayer les deux modifications suivantes une fois que vous aurez ajouté les vidéos à Webflow
• Colorie trop. Vous avez besoin d'une vidéo de grande taille, mais une fois que vous l'avez obtenue à la taille souhaitée, elle ne semble pas trop chaude. Déposez une couche noire sur la vidéo, modifiez la transparence pour que la vidéo soit toujours visible, mais la superposition adoucit la compression que vous avez appliquée.
• Flou. Comme ci-dessus, déposez un div sur l'élément vidéo et appliquez un flou pour atténuer les artefacts créés par la compression.
• Les superpositions de motifs peuvent également aider à réduire au maximum la transparence du motif tout en masquant les artefacts.
• Si vous avez du mal à rester discret, choisissez une vidéo très courte mais dont la boucle sera parfaite. Plus la vidéo est courte, plus sa taille est petite et si vous pouvez trouver quelque chose où le début et la fin de la boucle sont alignés, la boucle est moins évidente.
• Évitez le mouvement, qui semble contre-intuitif et vous essayez d'ajouter une vidéo, qui comporte intrinsèquement du mouvement... nous parlons simplement de mouvements rapides, de vidéos tremblantes, ce genre de choses.
• Pour ceux qui sont un peu plus intrépides, vous pouvez également suspendre la vidéo en utilisant du javascript après un certain nombre de boucles, cela allégera la charge du navigateur.
• Si le mobile vous inquiète, configurez la vidéo pour qu'elle s'affiche : aucune sur mobile et utilisez plutôt une image statique ou un très très petit gif (nous disons jif).
• Si vous n'êtes pas sûr d'utiliser Handbrake ou une application similaire pour la compression, Webflow recommande Chimp Champ, notez simplement que le plan Free n'exporte que le SD.

Méthode Vimeo

Pour Vimeo, vous aurez besoin d'un compte payant pour obtenir les identifiants de l'intégration et il est plus difficile de le faire couvrir une zone car l'élément essaiera de respecter le format d'origine. Mais ne vous inquiétez pas, le hack qu'ils ont ici fonctionne très bien, alors allez y jeter un œil. Nous l'avons également utilisé avec quelques modifications ici et là.

Il existe différentes implémentations de Vimeo en termes de code d'intégration HTML. Cela ressemblera à 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">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/LYBMxVG">
</a><a href="https://codepen.io/milkmoonstudio">Vidéos d'arrière-plan alimentées par un CMS dans Webflow - Vimeo Embeds par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>

N'oubliez pas de vérifier qu'il couvre correctement la zone sur tous les points d'arrêt de l'appareil.

Nous avons constaté que si la méthode Vimeo affiche parfois des résultats de page plus lents, le temps d'interaction, pendant lequel l'utilisateur peut réellement utiliser le site, est un peu plus rapide avec Vimeo, mais la vidéo met un peu plus de temps à charger en raison des iFrames. Nous laisserons aux experts de Webflow le soin de choisir l'option qui leur convient le mieux.

Nous dirons que parfois un élément vidéo fonctionne mieux avec Vimeo. Quelque chose comme ça :

<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">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/LYMoGxm">
</a><video><a href="https://codepen.io/milkmoonstudio">Élément vidéo d'arrière-plan Vimeo intégré par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>

Vous avez plus de contrôle car le débit adaptatif de Vimeo, etc., ne fonctionne pas. Sachez simplement que cela demande un peu plus de travail. Dans cet exemple, vous allez ajouter trois URL de Vimeo pour le fichier au lieu de simplement l'identifiant Vimeo. Assurez-vous également que lorsque vous copiez les URL de la page Vimeo de votre vidéo, vous utilisez les URL de téléchargement de Vimeo et non les URL du lecteur Vimeo. Les URL du lecteur expirent au bout de 2 jours. Cliquez simplement sur le nom de la vidéo, obtenez les liens dans la liste déroulante et souvenez-vous des URL de téléchargement. C'est à vous de choisir ceux que vous choisissez et dépendent de la qualité du fichier téléchargé. Vous opterez généralement pour un fichier de haute, moyenne et basse qualité, mais vous pouvez en ajouter d'autres, etc., à vous de choisir.

Nous avons également créé un article plus récent traitant spécifiquement de Vidéo d'arrière-plan Vimeo et utilisation de code d'intersection d'objets pour optimiser et contrôler les vidéos et autres éléments du site en fonction de l'état des vidéos, alors jetez un œil à cela également, mais pour les balises vidéo, vous pouvez utiliser le script Play and Pause de Finsweet pour optimiser les performances en diffusant simplement les vidéos dans la fenêtre d'affichage ou en les faisant une pause lorsqu'elles quittent la fenêtre d'affichage.

Si vous avez des questions, n'hésitez pas à laisser un commentaire et si vous en cherchez plus comment faire, consultez ce lien.