Ajouter une vidéo dans votre Collection CMS sans passer par l'élément vidéo natif de Webflow
Vidéo
| Format vidéo | Compatibilité | Codec |
|---|---|---|
| MP4 (H.264) | Chrome, Safari, Firefox, Edge | H.264/AAC |
| WebM (VP9) | Chrome, Firefox, Edge (pas Safari) | VP9/Opus |
| MP4 (HEVC) | Safari uniquement | H.265 — codecs=hvc1 |
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter une vidéo dans votre Collection CMS sans passer par l'élément vidéo natif de Webflow.
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 naturel. 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'
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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
