CMS

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

outils :

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

Nos autres tutoriels

Rendre un élément déplaçable sur son site web

OutilS
Webflow
Embed
Catégorie
Animation

Enrichir des données d’entreprise sur la base du numéro de SIREN

OutilS
Webflow
Wized
Catégorie
DATA/Tracking

Ajouter des données structurées à votre site Webflow ?

OutilS
Webflow
Embed
Catégorie
SEO
Voir tous nos tutoriels