Ajouter une vidéo dans votre Collection CMS sans passer par l'élément vidéo natif de Webflow

outils :

Vidéo

1. Convertir votre vidéo aux formats WEBM et MP4

Utiliser les formats WebM et MP4 pour vos vidéos en ligne offre plusieurs avantages, notamment une meilleure compatibilité avec les navigateurs et une optimisation pour tous les moteurs de recherche.

Compatibilité avec les navigateurs

Le format MP4 est largement pris en charge par la plupart des navigateurs, tels que Chrome, Safari, Firefox et Edge. De son côté, le format WebM est principalement supporté par les navigateurs basés sur Chromium, comme Chrome et Opera. En utilisant ces deux formats, vous assurez une compatibilité optimale avec la majorité des navigateurs utilisés par les internautes.

Compression et qualité

Les deux formats offrent un bon compromis entre la qualité vidéo et la taille du fichier. Le format WebM est basé sur le codec vidéo VP8 ou VP9, qui offre une compression supérieure et une qualité similaire au H.264 utilisé dans le format MP4. Ainsi, vos vidéos auront une qualité satisfaisante tout en étant moins lourdes, ce qui améliore le temps de chargement et l'expérience utilisateur.

Optimisation pour les moteurs de recherche

Les moteurs de recherche, tels que Google, accordent une grande importance à la vitesse de chargement des pages. En utilisant des formats de vidéo efficaces en termes de compression, vous améliorez la vitesse de chargement de votre site, ce qui a un impact positif sur votre référencement. De plus, en fournissant deux formats différents, vous vous assurez que les utilisateurs pourront lire la vidéo, quel que soit leur navigateur, ce qui contribue à une expérience utilisateur de qualité.

Adaptabilité

Les formats WebM et MP4 sont adaptables à différentes résolutions et débits, ce qui permet de proposer des vidéos adaptées à la connexion et à l'appareil de l'utilisateur. Cette adaptabilité est essentielle pour offrir une expérience de lecture fluide sur les appareils mobiles et les connexions moins performantes.

Pour convertir vos vidéo au bon format je vous encourage d'utiliser l'outil Rotato Converter

2. Ajoutez ce code dans la le <head> de votre page

 < video class = "video"  width="100%" height="100%" autoplay loop muted playsinline>
 	
 < source src="video.mp4" type='video/mp4; codecs="hvc1" '
 < source src="video.webm" type='video/webm'
</video>

Pensez à bien mettre les liens de vos vidéos dans le code à la place de "video.mp4" et "video.webm"

3. Publiez votre site et testez le résultat

Photo de l'auteur
Sandro D.
Mis à jour le
16/5/2024
Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)
Vous êtes bridé avec votre site actuel ?
On en discute ?
Accueil
>
Gemeos Académie
>
Ajouter une vidéo dans votre Collection CMS sans passer par l'élément vidéo natif de Webflow
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleures pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail