Comment ajouter une vidéo à votre collection Webflow CMS sans utiliser YouTube

Webflow fournit une fonction native Élément vidéo, ce qui est utile pour intégrer des vidéos provenant de plateformes telles que YouTube ou Vimeo. Toutefois, si vous souhaitez hébergez vous-même vos vidéos, Webflow ne propose pas de solution intégrée.

L'hébergement et l'intégration de vidéos directement sur votre site peuvent être bénéfiques pour :

• ‍Une meilleure image de marque (pas de logos tiers ni de vidéos recommandées).‍
• Chargement plus rapide (s'il est optimisé correctement).‍
• Contrôle total sur le comportement de la vidéo (lecture automatique, mise en boucle, style personnalisé).‍
• Conformité au RGPD (Règlement général sur la protection des données), qui est en train de devenir un enjeu majeur pour les entreprises en Europe et au-delà.

‍

Avec les récents Réglementations du RGPD, l'intégration de vidéos YouTube sur un site Web est devenue problématique. YouTube utilise des cookies pour suivre le comportement des utilisateurs, et si un visiteur ne le fait pas accepter les cookies dans le gestionnaire de cookies, la vidéo YouTube ne s'affichera pas.

Cela signifie que vidéos auto-hébergées ne sont plus simplement alternative—ils sont devenir la norme pour la conformité du site Web et l'expérience utilisateur. À moins que votre objectif ne soit de augmentez le nombre de vues, le nombre de likes et l'engagement sur YouTube, auto-hébergement vidéos est désormais l'approche recommandée pour les sites Web où le but de la vidéo est purement informatif ou esthétique.

‍

Pourquoi utiliser les formats MP4 et WebM pour les vidéos ?

‍

1. Compatibilité entre navigateurs

‍

Les différents navigateurs prennent en charge différents formats vidéo. Pour garantir une compatibilité maximale, il est préférable d'utiliser à la fois :

• ‍MP4 (H.264 ou H.265 - HEVC) → Fonctionne dans Chrome, Firefox, Safari, Edge et presque tous les navigateurs.‍
• WebM (codec VP8 ou VP9) → Fonctionne dans Chrome, Opera et Firefox, mais n'est pas toujours pris en charge dans Safari.

En fournissant les deux formats, votre vidéo sera diffusée quel que soit le navigateur utilisé par le visiteur.

‍

2. Compression de fichiers et équilibre de qualité

‍

• ‍MP4 (H.264) est un format largement utilisé avec une bonne compression et une bonne qualité, mais WebM fournit souvent même fichiers de plus petite taille avec une qualité similaire.‍
• WebM (codec VP9) offre une meilleure compression, ce qui signifie des fichiers plus petits avec temps de chargement plus rapides et une utilisation moindre de la bande passante.

‍

3. Conformité au RGPD (pourquoi ne pas utiliser YouTube ?)

‍

L'une des principales raisons de vidéos auto-hébergées au lieu de les intégrer depuis YouTube, c'est Conformité au RGPD. Voici pourquoi :

• ‍YouTube place des cookies de suivi sur les visiteurs, même s'ils n'interagissent pas avec la vidéo.‍
• Si un visiteur n'accepte pas les cookies dans le gestionnaire de cookies, la vidéo YouTube intégrée ne se chargera pas du tout.‍
• Les vidéos auto-hébergées ne nécessitent pas de cookies de suivi tiers, ce qui signifie qu'ils sont conformes immédiatement conformes au RGPD et ne nécessitent pas de gestion complexe des cookies.

À moins que l'objectif de votre vidéo ne soit de augmenter l'engagement sur YouTube (likes, commentaires et vues), vidéos auto-hébergées est le meilleur choix pour les sites Web, les blogs, les portfolios et les pages de destination des entreprises.

‍

4. Optimisation du référencement et de la vitesse des pages

‍

• Google considère vitesse de chargement des pages comme facteur de classement.‍
• Les vidéos lourdes et non optimisées ralentissent votre site Web, ce qui a un impact négatif sur le référencement.‍
• Utilisation de WebM (qui possède un taux de compression plus élevé) permet de réduire la taille des fichiers tout en préservant une qualité élevée.

‍

5. Adaptabilité mobile

‍

• Tous les utilisateurs n'ont pas connexions Internet rapides, notamment sur les appareils mobiles.
• Les deux MP4 et WebM prennent en charge le streaming adaptatif, permettant de meilleures performances sur différentes tailles d'écran et vitesses Internet.‍
• Webflow ne prend pas en charge le streaming adaptatif nativement, donc l'utilisation des deux formats garantit la meilleure expérience.

‍

Étape 1 : convertissez votre vidéo aux formats MP4 et WebM

‍

Comment convertir rapidement vos vidéos

Vous pouvez utiliser convertisseurs en ligne pour transformer vos fichiers aux formats WebM et MP4 en quelques clics :

• ‍Convertio → Téléchargez votre vidéo et convertissez-la instantanément en WebM ou MP4.

Si vous avez Vidéo MP4 et avez besoin d'une version WebM, vous pouvez facilement la convertir en utilisant les liens ci-dessus. Il vous suffit de charger votre fichier, de choisir le format souhaité et de télécharger la vidéo optimisée prête pour Webflow.

‍

Étape 2 : intégrer la vidéo à l'aide d'un code personnalisé

‍

Étant donné que Webflow n'autorise pas le téléchargement direct de MP4 et WebM fichiers dans le CMS, la meilleure alternative est d'utiliser un service d'hébergement externe comme Cloudinaire. Cet outil fournit une plan gratuit, vous permettant de stocker et de récupérer facilement vos vidéos tout en garantissant des vitesses de chargement rapides.

1. Créez un compte Cloudinary gratuit

‍

• Accédez à Cloudinary et créez un compte gratuit.
• Une fois votre compte créé, connectez-vous à votre tableau de bord.

2. Téléchargez vos fichiers vidéo

‍

• Dans votre espace Cloudinary, accédez au Assets.
• Sélectionnez vos fichiers vidéo MP4 et WebM et téléchargez-les dans la plateforme.
• Une fois chargé, Cloudinary générera un URL publique pour chaque fichier.

‍

3. Obtenez l'URL de votre vidéo

‍

• Localisez la vidéo mise en ligne dans votre Actifs liste.
• Cliquez sur le fichier et vous verrez URL directe.
• Copiez ceci URL, car vous devrez l'insérer dans le code ci-dessous.

4. Insérez l'URL dans le code

Une fois que vous avez Liens vidéo sur Cloudinary, mettez à jour le code HTML en conséquence :

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

📌 Remplacer https://res.cloudinary.com/your-account/video.mp4 et https://res.cloudinary.com/your-account/video.webm avec les URL réelles de votre compte Cloudinary.

En utilisant Cloudinary, vos vidéos seront hébergé en externe, garantissant livraison rapide sans compter sur les limites de Webflow. Vous êtes maintenant prêt à intégrer la vidéo dans Webflow !

‍

{{blog_article_cta01}}

‍

Étape 3 : publication et test de la vidéo

‍

Une fois que vous avez ajouté Code vidéo HTML vers votre page Webflow :

1. ‍Publier votre site.‍
2. Ouvrez-le dans différents navigateurs (Chrome, Firefox, Safari, Edge) pour tester la compatibilité.‍
3. Testez sur mobile pour garantir la bonne mise à l'échelle de la vidéo.‍
4. Vérifiez la vitesse de la page en utilisant Informations sur la vitesse de Google PageSpeed pour voir comment le chargement des vidéos affecte les performances.

‍

Bonus: personnaliser la vidéo avec CSS dans Webflow

‍

Si vous voulez styliser l'élément vidéo en utilisant le Designer de Webflow, vous pouvez ajouter CSS dans la section Custom Code → Head :

<style>
.video {
    border-radius: 12px; /* Adds rounded corners */
    box-shadow: 0px 5px 15px rgba(0,0,0,0.3); /* Adds a shadow */
    object-fit: cover; /* Ensures the video fills the container */
}
</style>

📌 Vous pouvez ajuster le CSS pour qu'il corresponde au design de votre site web.

‍

Conclusion

‍

En intégrant des vidéos à l'aide du Embed code, au lieu de Webflow Bloc vidéo natif, vous gagnez un meilleur contrôle sur le comportement, le style, les performances et la conformité légale des vidéos.

‍

Si vous souhaitez ajouter un lecteur à la vidéo, avec la possibilité de jouer, mettre en pause, voir la progression de la vidéo, etc., nous avons fait un autre article 'Comment ajouter un lecteur vidéo personnalisé à votre site Webflow'. N'hésitez pas à le consulter si vous souhaitez personnaliser vos vidéos, car cette méthode fonctionne parfaitement avec le code que nous avons créé dans cet article.

‍

Principaux points à retenir :

✔ Utiliser les formats MP4 et WebM pour compatibilité maximale des navigateurs.

✔ Vidéos auto-hébergées à éviter Problèmes liés au RGPD et cookies de suivi tiers.

✔ Optimisation de la taille des fichiers pour améliorer la vitesse des pages et le référencement.

✔ Personnaliser l'apparence de la vidéo en utilisant CSS dans Webflow.