CMS

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

outils :
Illustration croce

Sommaire

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

Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Aucun autre tutoriel pour cette catégorie pour le moment.
Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

Votre site est développé avec les meilleurs outils et les meilleurs 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 designer votre site web sur mesure et optimiser son taux de conversion

Webflow

Pour une intégration pixel perfect et optimisée de votre site web

Client-first

Pour une organisation aux petits oignons de votre projet

Wized

Pour ajouter des fonctionnalités avancées à votre projet

Make

Pour automatiser vos fluxs de travail et vous faire gagner un max de temps