Intégrer une vidéo locale depuis WordPress

il est tout à fait possible d’intégrer une vidéo directement depuis la bibliothèque média de WordPress, sans passer par une plateforme externe comme Youtube ou Vimeo. Cette solution peut être pertinente dans certains cas précis.

Quand utiliser une vidéo locale

Une vidéo locale est particulièrement adaptée si vous souhaitez :

• diffuser une vidéo courte (présentation, démonstration, message de bienvenue)
• garder un contrôle total sur votre contenu
• éviter l’affichage de publicités ou de vidéos suggérées externes

Les limites des vidéos stockées en local

Attention toutefois, les vidéos hébergées directement sur WordPress peuvent rapidement :

• alourdir le poids de votre site
• ralentir le temps de chargement des pages
• impacter négativement l’expérience utilisateur et le référencement

L’importance du format WEBM

Pour une compatibilité optimale sur tous les navigateurs et appareils, il est fortement conseillé d’utiliser le format WEBM, offrant une qualité HD et une taille de fichier réduite.

Si vous utilisez des vidéos locales, limitez leur nombre par page et évitez les fichiers trop volumineux. Pour garantir la stabilité, la sécurité et la performance de votre site dans le temps, pensez à mettre en place une maintenance WordPress régulière.

Pour aller plus loin, découvrez également mes astuces WordPress et tutoriels pour optimiser l’utilisation de Divi au quotidien.

Etapes pour intégrer une vidéo sous Divi (pas à pas)

Accéder au Builder Divi

Nous avons plusieurs possibilités pour intégrer une vidéo sur notre page, soit :

• — Dans une nouvelle section
• — Dans une nouvelle rangée
• — Ou comme ici dans un nouveau module

Ajouter le module vidéo

Nous allons commencer par ajouter un nouveau module puis sélectionner le module vidéo.

Pour intégrer une vidéo YouTube :

• — Aller sur la roue crantée
• — Aller chercher le lien de la vidéo
• — Insérer à partir d’une URL

Vous pouvez effacer le "http" qui est proposé et ajouter l'URL.

Puis Insérer dans la publication.

Configurer l’affichage et le responsive

Image de superposition

Il est possible de mettre une image en superposition qui servira d’aperçu visuel aux internautes.

Personnalisation du bouton de lecture

Nous avons également la possibilité de personnaliser le bouton de lecture YouTube

Pour cela,

• — Aller dans Style
• — Jouer l’icône
• — Sélectionner la couleur souhaitée

Une fois la vidéo intégrée via le module Divi, il est essentiel de configurer correctement son affichage pour qu’elle s’adapte à tous les écrans. Divi permet de définir la largeur, la hauteur et l’alignement de votre vidéo, ainsi que de gérer le comportement sur mobile, tablette et ordinateur.

Assurez-vous que la vidéo reste responsive, c’est-à-dire qu’elle se redimensionne automatiquement selon la taille de l’écran, sans déformer l’image ni perturber la mise en page. Pour cela, privilégiez des dimensions en pourcentage plutôt qu’en pixels fixes et utilisez les options responsive proposées par Divi.

Bonnes pratiques : évitez les vidéos trop larges ou trop hautes qui pourraient créer des espaces blancs ou des scrolls inutiles sur mobile.

Tester la vidéo sur mobile et ordinateur

Avant de publier votre page, testez toujours la vidéo sur différents appareils. vérifiez que :

• la lecture est fluide et sans coupures
• l’image s’affiche correctement sur mobile, tablette et desktop
• les contrôles (lecture, pause, volume) fonctionnent correctement
• la vidéo ne ralentit pas le chargement de la page

Cette étape est indispensable pour garantir une expérience utilisateur optimale et éviter les frustrations de vos visiteurs. Une vidéo mal configurée sur mobile peut nuire à votre crédibilité et au temps passé sur votre site.

Astuce : demandez à un collègue ou à un ami de tester également, car un regard extérieur permet souvent de détecter des problèmes que l’on ne voit pas soi-même.

Bonnes pratiques pour optimiser une vidéo sur Divi

Intégrer une vidéo sur votre site est un vrai plus, mais attention à ne pas pénaliser la vitesse et l’expérience utilisateur. Voici les bonnes pratiques à suivre :

Limiter le nombre de vidéos par page

Evitez de surcharger vos pages avec trop de vidéos. Si plusieurs vidéos sont nécessaires, répartissez-les sur différentes pages ou sections pour ne pas ralentir le chargement.

Optimiser le poids et le format

Pour les vidéos locales, privilégiez le format mp4 ou webm et compressez vos fichiers pour réduire leur taille sans perdre en qualité. Pour les vidéos Youtube ou Vimeo, laissez la plateforme gérer la diffusion et la compression.

Vérifier le responsive et l’affichage

Assurez-vous que vos vidéos s’adaptent à tous les appareils (ordinateur, tablette, mobile). Le module Divi permet de paramétrer facilement la largeur, la hauteur et l’alignement pour un affichage optimal.

Eviter la lecture automatique avec le son

La lecture automatique peut gêner l’utilisateur et ralentir la page. Laissez toujours l’utilisateur décider du lancement de la vidéo.

Conseil supplémentaire : testez vos pages avec Google PageSpeed Insights pour vérifier l’impact des vidéos sur la performance et corrigez si nécessaire.

Tester la vidéo sur mobile et ordinateur

Avant de publier votre page, testez toujours la vidéo sur différents appareils. vérifiez que :

• la lecture est fluide et sans coupures
• l’image s’affiche correctement sur mobile, tablette et desktop
• les contrôles (lecture, pause, volume) fonctionnent correctement
• la vidéo ne ralentit pas le chargement de la page

Cette étape est indispensable pour garantir une expérience utilisateur optimale et éviter les frustrations de vos visiteurs. Une vidéo mal configurée sur mobile peut nuire à votre crédibilité et au temps passé sur votre site.

Astuce : demandez à un collègue ou à un ami de tester également, car un regard extérieur permet souvent de détecter des problèmes que l’on ne voit pas soi-même.

Intégrer une vidéo sous Divi sans nuire au référencement

Une vidéo bien intégrée peut améliorer l’expérience utilisateur et le temps passé sur votre page, mais elle doit rester seo-friendly.

Impact sur la vitesse

Les vidéos lourdes ralentissent le site et peuvent nuire à votre référencement. Privilégiez les vidéos hébergées sur Youtube ou Vimeo pour les longs formats et utilisez des vidéos locales compressées pour les courtes séquences.

Importance du lazy loading

Activez le lazy loading pour vos vidéos afin qu’elles se chargent uniquement lorsque l’utilisateur fait défiler la page. Cela améliore le temps de chargement et l’expérience mobile.

Rôle de la vidéo dans le SEO

Google valorise le contenu qui capte l’attention et génère du temps passé sur la page. Une vidéo bien intégrée, descriptive et pertinente contribue à :

• réduire le taux de rebond
• augmenter la durée moyenne des sessions
• améliorer indirectement votre positionnement

Astuce SEO : ajoutez toujours un titre, une description et un texte alternatif pour chaque vidéo afin d’optimiser le référencement naturel et l’accessibilité.

Besoin d’aide pour intégrer vos vidéos sur Divi ?

Si vous souhaitez intégrer des vidéos sur votre site Divi tout en conservant performance, sécurité et référencement, je peux vous accompagner ou réaliser les ajustements nécessaires.

J'accompagne également les indépendants et professionnels dans la création de site internet sous WordPress, en clé en main ou en accompagnement, pour un site efficace, évolutif et adapté à vos besoins.

Vous pouvez retrouver l’ensemble de ces manipulations dans le tuto vidéo ci-dessous

Autres articles qui pourraient vous plaire