Comment ajouter une vidéo à WordPress sans ralentir mon site 

Chaque fois que je crée une page de destination à forte conversion, ma première pensée est presque toujours d'inclure une vidéo. C'est le moyen le plus rapide d'établir la confiance, mais seulement si elle s'affiche de manière transparente pour l'utilisateur.

La plupart des tutoriels vous montrent comment coller une URL et considérer que c'est fait. Ce qu'ils omettent, c'est pourquoi votre vidéo pourrait faire chuter la vitesse de votre page, et ce qu'il faut faire à la place.

Lorsque vous connaissez les étapes, l'intégration d'une vidéo dans WordPress prend moins de deux minutes. Dans ce guide, je vais vous présenter chaque méthode que j'utilise, y compris comment maintenir la rapidité de vos pages après l'avoir fait.

Pourquoi ajouter des vidéos à votre site WordPress ?

82 % des spécialistes du marketing vidéo signalent une augmentation du trafic web après avoir ajouté des vidéos à leur contenu. C'est une excellente raison de commencer à utiliser la vidéo sur votre site WordPress.

L'ajout de vidéos de haute qualité peut améliorer votre SEO WordPress et faciliter votre découverte par les internautes.

Dois-je télécharger des vidéos directement sur WordPress ?

Il est préférable d'intégrer des vidéos à partir de plateformes comme YouTube ou Vimeo plutôt que de les télécharger directement sur WordPress.

Bien que vous puissiez télécharger des vidéos dans votre médiathèque, je ne le recommande pas. Chez SeedProd, nous intégrons toujours des vidéos à la place, et voici pourquoi :

• Tailles de fichiers volumineuses : les vidéos occupent beaucoup d'espace de stockage et peuvent ralentir votre site, nuisant à l'expérience utilisateur et au SEO.
• Utilisation intensive de la bande passante : le streaming vidéo consomme des ressources serveur importantes. Si votre plan d'hébergement a des limites, vous pourriez les atteindre rapidement et faire face à des coûts supplémentaires.
• Opportunités de trafic supplémentaires : l'hébergement sur des plateformes comme YouTube ou Vimeo vous permet d'atteindre leur public et d'envoyer plus de visiteurs sur votre site.

L'intégration ou l'utilisation d'un plugin vidéo WordPress est le moyen le plus efficace de maintenir la rapidité et l'accessibilité de votre site tout en élargissant votre portée.

Où héberger votre vidéo avant de l'intégrer

Avant de pouvoir intégrer une vidéo, elle doit exister quelque part. Voici les trois options les plus courantes.

Plateforme	Coût	Idéal pour	Compromis
YouTube	Gratuit	Découverte, contenu public	Affiche des vidéos similaires à la fin ; impossible de supprimer la marque sur le plan gratuit
Vimeo	Version gratuite ; plans payants à partir de 20 $/mois	Pages de vente, vidéo professionnelle	Aucune vidéo concurrente ; plan payant nécessaire pour les fonctionnalités professionnelles
Auto-hébergé avec CDN	Variable (coûts d'hébergement + CDN)	Contenu vidéo restreint ou premium	Contrôle total ; coût plus élevé et plus de configuration requise

Pour la plupart des sites, YouTube est le bon choix : gratuit, rapide et idéal pour la découverte. Si vous utilisez la vidéo pour des pages de vente ou si vous ne voulez aucune publicité de concurrents à la fin, le plan payant de Vimeo en vaut la peine.

Comment intégrer une vidéo dans WordPress : 4 méthodes

Il existe plusieurs façons d'intégrer une vidéo dans WordPress. Ci-dessous, je partagerai les méthodes que j'utilise le plus, de l'approche la plus simple de copier-coller à la méthode iFrame pour les plateformes non standard.

Méthode 1 : Intégrer une vidéo dans les articles et pages WordPress (méthode de l'éditeur de blocs)

L' Éditeur de blocs WordPress, ou Gutenberg, offre un moyen simple d'intégrer des vidéos dans vos articles et pages WordPress.

Tout d'abord, vous aurez besoin de l'URL de la vidéo que vous souhaitez intégrer. Si vous utilisez une plateforme comme YouTube, accédez à la vidéo et copiez l'URL de la barre d'adresse. Vous pouvez également cliquer sur l'icône de partage et copier l'URL de la vidéo à partir de là.

Ensuite, accédez à l'article ou à la page où vous souhaitez ajouter la vidéo et cliquez sur « Modifier » pour ouvrir l'éditeur de blocs WordPress.

Cliquez n'importe où dans l'éditeur de blocs WordPress et collez l'URL que vous avez copiée précédemment. Une fois que vous avez collé l'URL de la vidéo, WordPress récupérera automatiquement le code d'intégration et affichera la vidéo dans l'éditeur de contenu.

Ensuite, vous pouvez personnaliser la vidéo en cliquant sur les options de la barre d'outils contextuelle. Par exemple, vous pouvez modifier la largeur de la vidéo, l'alignement, les légendes, le rapport d'aspect, etc.

WordPress ne peut qu'intégrer automatiquement les plateformes autorisées, y compris :

• Amazon
• Dailymotion
• Facebook
• Imgur
• Instagram
• Reddit
• SoundCloud
• Spotify
• Twitter
• Vimeo
• YouTube
• Et plus encore.

Si vous souhaitez intégrer des vidéos de sites Web qui ne figurent pas sur la liste blanche, vous devrez copier et coller le code HTML complet de la vidéo. Ajoutez simplement un nouveau bloc appelé HTML personnalisé et collez le code vidéo pour ce faire.

La dernière étape consiste à enregistrer et à publier votre article ou votre page pour rendre la vidéo visible.

Si vous utilisez toujours l'éditeur classique, vous pouvez copier l'URL de la vidéo et la coller directement dans l'éditeur WordPress. Comme avant, la vidéo se chargera automatiquement.

Méthode 2 : Ajouter une vidéo n'importe où sur votre site WordPress avec SeedProd

Si vous recherchez une approche plus personnalisée pour intégrer des vidéos dans WordPress, SeedProd offre une solution simple mais puissante.

SeedProd est un constructeur de sites Web par glisser-déposer qui vous permet d'ajouter des vidéos à n'importe quelle partie de votre site : pages de destination, modèles de thème, barres latérales, sans toucher au code.

Tout d'abord, vous devrez installer et activer le plugin SeedProd.

Pour obtenir de l'aide à ce sujet, vous pouvez consulter notre documentation sur l'installation de SeedProd. Elle expliquera comment télécharger, installer et activer le plugin ainsi que votre clé de licence.

Maintenant, vous pouvez ajouter des vidéos à votre site Web en utilisant le constructeur par glisser-déposer de SeedProd.

Ajouter des vidéos à une page de destination WordPress

Avec SeedProd, ajouter une vidéo à votre page de destination est un jeu d'enfant. Accédez à SeedProd » Constructeur de pages de destination depuis votre tableau de bord WordPress et créez une nouvelle page de destination ou modifiez une page WordPress existante.

Une fois dans le constructeur de pages, vous avez 2 options pour intégrer du contenu vidéo. Vous pouvez utiliser le bloc Vidéo standard ou le bloc Pop-up Vidéo avancé.

Ajout du bloc Vidéo

Pour utiliser le bloc vidéo, trouvez-le dans la barre latérale gauche et faites-le glisser sur la mise en page de votre page de destination.

Vous pouvez choisir parmi 2 sources vidéo dans les paramètres du bloc : YouTube et Personnalisé.

La source YouTube vous permet de coller un lien vidéo YouTube et intégrera automatiquement le code vidéo pour vous. Ensuite, vous pouvez personnaliser la largeur de la vidéo, l'alignement et la visibilité sur les appareils de bureau ou mobiles en quelques clics.

Si vous sélectionnez l'option Personnalisé, vous pouvez intégrer une vidéo dans WordPress sans YouTube. Pour ce faire, vous devrez copier et coller le code d'intégration de la vidéo dans la zone Code vidéo personnalisé.

Ajout du bloc Popup Vidéo

Le bloc Popup Vidéo de SeedProd offre de nombreuses options de personnalisation supplémentaires par rapport au bloc standard. Vous le trouverez dans la barre latérale Blocs avancés, puis faites-le glisser sur votre page.

Dans les paramètres du bloc, il existe plusieurs options de source vidéo.

Vous pouvez intégrer automatiquement du contenu vidéo de YouTube ou Vimeo en collant le lien de la vidéo.

Alternativement, l'option Personnalisé vous permet de télécharger une vidéo depuis votre ordinateur ou de coller un lien vidéo d'un site Web externe.

Après avoir choisi la source vidéo, vous pouvez personnaliser le lecteur vidéo en activant différentes fonctionnalités, notamment :

• Marque modeste : Masquez la marque YouTube de votre lecteur vidéo.
• Mode confidentialité : Empêchez YouTube ou Vimeo de stocker les informations des visiteurs à moins qu'ils ne lisent la vidéo.
• Chargement différé : Améliorez votre temps de chargement de page en chargeant les vidéos après le chargement de la page.

De plus, l'activation de la fonctionnalité Vidéo fixe garantit que lorsque les utilisateurs visitent cette page, la vidéo reste en bas de l'écran pendant qu'ils font défiler.

Gardez l'attention d'un visiteur sur votre message clé même lorsqu'il fait défiler.

Enfin, le bloc Popup Vidéo dispose d'une option Superposition vidéo, qui vous permet de télécharger une image de miniature vidéo personnalisée et une icône de lecture.

Vous pouvez même activer l'option Lightbox afin que la vidéo s'ouvre dans une popup Lightbox lorsqu'un utilisateur clique dessus.

Sur une page de destination, j'utilise le Pop-up Vidéo avec une miniature personnalisée et l'option Lightbox. Le visiteur voit une image nette jusqu'à ce qu'il choisisse de regarder. La vidéo s'ouvre en plein écran lorsqu'il est prêt, sans lecture automatique et sans ralentissement de la page. C'est la configuration que j'utilise sur mes propres pages de destination SeedProd.

Pour un guide de personnalisation complet, consultez notre tutoriel sur comment créer une page de destination vidéo dans WordPress.

Lorsque vous êtes satisfait de votre vidéo et des personnalisations de votre page de destination, cliquez sur le bouton Enregistrer et Publier pour rendre les modifications effectives.

Voici un exemple de la vidéo finale après l'avoir ajoutée à WordPress avec SeedProd :

Intégrer une vidéo dans votre thème WordPress

Vous pouvez apprendre comment en suivant ce guide sur comment créer un thème WordPress.

L'ajout de vidéos à différentes parties de votre thème WordPress suit des étapes similaires à l'option de page de destination. Tout ce que vous avez à faire est de visiter SeedProd » Constructeur de thèmes et de modifier l'un des modèles de thème.

Par exemple, vous pouvez ouvrir le modèle de barre latérale et y faire glisser l'un des blocs vidéo pour intégrer une vidéo dans votre barre latérale WordPress.

Voici à quoi cela ressemblerait après avoir enregistré les modifications :

Ou vous pouvez modifier le modèle de pied de page pour ajouter du nouveau contenu vidéo à vos widgets de pied de page.

C'est vraiment aussi simple que cela, et rien de tout cela n'implique de coder à partir de zéro ou d'embaucher un développeur.

Méthode 3 : Utiliser des plugins vidéo WordPress pour intégrer et personnaliser des vidéos

Si vous recherchez des fonctionnalités plus avancées ou si vous avez des besoins spécifiques que l'éditeur de blocs WordPress ou SeedProd ne peuvent pas satisfaire, un plugin WordPress spécialisé dans les intégrations vidéo pourrait être la meilleure solution.

Pour cela, nous recommandons le plugin YouTube Feed Pro de Smash Balloon, le meilleur plugin de galerie vidéo YouTube pour WordPress. Il vous permet d'intégrer des vidéos de chaînes YouTube dans une galerie personnalisable.

Le plugin peut importer automatiquement de nouvelles vidéos, combiner des flux vidéo, ajouter une fonctionnalité de diffusion en direct, intégrer une playlist YouTube, et plus encore. Les intégrations YouTube incluent également des boutons J'aime et Partager, des commentaires et des réactions pour renforcer la preuve sociale directement dans le widget vidéo.

Pour en savoir plus, vous pouvez consulter ce guide sur comment intégrer des vidéos YouTube dans WordPress.

Méthode 4 : Intégrer à l'aide du code iFrame (pour les sites non approuvés)

Les trois méthodes ci-dessus gèrent 90 % des cas. Si vous avez besoin d'intégrer à partir d'un site que WordPress ne détecte pas automatiquement, ou si vous souhaitez contrôler les suggestions de vidéos connexes de YouTube, vous aurez besoin du code iFrame à la place.

Voici comment faire :

1. Accédez à la vidéo sur YouTube, cliquez sur Partager puis sur Intégrer, et copiez le code iFrame.
2. Dans l’éditeur de blocs WordPress, ajoutez un bloc HTML personnalisé.
3. Collez le code iFrame dans le bloc.
4. Enregistrez et publiez votre page.

Utilisez cette méthode lorsque la plateforme ne figure pas sur la liste blanche oEmbed de WordPress, ou lorsque vous avez besoin de paramètres personnalisés. Par exemple, l’ajout de rel=0 à l’URL YouTube réduit les suggestions de vidéos connexes à la fin.

Une chose à savoir est que les iFrames manuels ne sont pas automatiquement responsives sur mobile. Pour résoudre ce problème, encapsulez l’iFrame dans un conteneur CSS. Collez ceci dans le CSS personnalisé de votre thème ou dans un bloc HTML au-dessus de l’intégration :

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Ensuite, encapsulez votre iFrame comme ceci : <div class="video-container">[code iFrame ici]</div>. La valeur padding-bottom de 56,25 % vous donne un rapport d’aspect de 16:9 sur n’importe quelle taille d’écran.

Pour ajouter une vidéo MP4 que vous hébergez vous-même, utilisez le bloc Vidéo de l’éditeur de blocs (pas le bloc YouTube), cliquez sur « Télécharger », sélectionnez votre MP4, et WordPress insérera un lecteur vidéo HTML5 natif. Désactivez la lecture automatique et ajoutez une image d’affiche pour de meilleures performances.

Comment éviter que les vidéos ne ralentissent vos pages

L’intégration d’une vidéo depuis YouTube est rapide car la vidéo elle-même réside sur leurs serveurs. Mais le lecteur charge toujours des scripts sur votre page, et cela affecte les performances. Voici ce que je fais sur chaque page vidéo pour que les choses restent rapides.

• Chargement différé : Le lecteur vidéo ne se charge que lorsqu’un utilisateur fait défiler la page jusqu’à lui. Dans SeedProd, vous pouvez l’activer directement dans les paramètres du bloc Pop-up Vidéo. Dans l’éditeur de blocs, WordPress charge les vidéos de manière différée par défaut depuis la version 5.5.
• Miniature personnalisée (superposition d’image) : Au lieu de charger le lecteur complet au chargement de la page, vous affichez une image légère. Le lecteur ne s’initialise que lorsque le visiteur clique sur lecture. L’option Superposition Vidéo de SeedProd fait exactement cela. Pour une intégration YouTube typique, cela réduit considérablement le poids initial de la page.
• Évitez les téléchargements directs : Comme mentionné précédemment, les vidéos téléchargées sur WordPress sont servies depuis votre propre serveur. Si vous hébergez vous-même la vidéo, utilisez un CDN pour la distribuer depuis des serveurs plus proches de vos visiteurs.
• Vidéo responsive : Les vidéos intégrées automatiquement depuis l’éditeur de blocs sont responsives par défaut. Les iFrames manuels nécessitent le wrapper CSS décrit dans la méthode 4 ci-dessus.

Le plus grand avantage vient de la miniature personnalisée. J’ai vu des pages réduire leur temps de rendu de moitié simplement en remplaçant une intégration YouTube par défaut par une image en superposition. C’est un changement de cinq minutes avec une réelle différence de vitesse.

Rendre vos vidéos accessibles

Deux autres choses à faire avant de considérer cela comme terminé.

• Sous-titres : Activez les sous-titres sur YouTube, ou téléchargez un fichier SRT directement sur la plateforme. Pour Vimeo, la même option est disponible dans les paramètres vidéo. Les sous-titres aident les utilisateurs malentendants et améliorent le temps de visionnage pour les spectateurs dans des environnements bruyants.
• Transcriptions : Collez une transcription textuelle sous la vidéo. C’est un signal SEO important et rend le contenu accessible aux utilisateurs qui ne peuvent pas du tout entendre l’audio.
• Pas de lecture automatique inattendue : le réglage de chargement différé de SeedProd signifie que la vidéo ne se lance que lorsqu'un visiteur le choisit. C'est un avantage pour l'accessibilité. Un son inattendu désoriente les utilisateurs de lecteurs d'écran.

FAQ sur comment intégrer une vidéo dans WordPress

Comment intégrer une vidéo dans WordPress sans YouTube ?

Utilisez l'option source vidéo personnalisée de SeedProd ou le bloc HTML personnalisé de l'éditeur de blocs. Dans SeedProd, sélectionnez le bloc Vidéo ou le bloc Pop-up Vidéo, choisissez Personnalisé comme source, et collez le code d'intégration de votre vidéo. Dans l'éditeur de blocs, ajoutez un bloc HTML personnalisé et collez le code iFrame ou d'intégration de votre plateforme vidéo. Cela fonctionne pour Vimeo, les vidéos auto-hébergées et toute plateforme qui fournit un code d'intégration.

Comment ajouter une vidéo MP4 à WordPress ?

Utilisez le bloc Vidéo de l'éditeur de blocs (pas le bloc YouTube) pour télécharger directement un MP4. Cliquez sur le bloc, choisissez Télécharger, et sélectionnez votre fichier MP4. WordPress insère un lecteur vidéo HTML5 natif. Pour de meilleures performances, désactivez la lecture automatique et ajoutez une image d'affiche afin que les visiteurs voient une miniature statique avant le chargement de la vidéo.

Pourquoi ne puis-je pas intégrer une vidéo YouTube sur WordPress ?

WordPress doit être configuré pour autoriser les intégrations. Allez dans Réglages » Médias et vérifiez que « Essayer d'intégrer automatiquement toutes les URL de texte brut » est coché. Si l'intégration échoue toujours, le propriétaire de la vidéo peut avoir désactivé l'intégration de son côté.

Utilisez l'URL vidéo standard de la barre d'adresse, pas un lien de partage ou une URL raccourcie. Ceux-ci peuvent parfois perturber la détection d'intégration automatique.

Comment optimiser la vitesse de chargement des vidéos dans WordPress ?

Activez le chargement différé afin que le lecteur vidéo ne se charge que lorsqu'un visiteur y accède. Utilisez une miniature personnalisée (superposition d'image) au lieu du lecteur par défaut. Le lecteur complet ne s'initialise qu'au clic, ce qui réduit considérablement le poids initial de la page.

Évitez de télécharger directement des vidéos sur WordPress. Si vous auto-hébergez, utilisez un CDN pour servir le fichier depuis des serveurs plus proches de vos visiteurs.

Puis-je lire automatiquement des vidéos dans WordPress ?

Oui, mais les navigateurs comme Chrome et Safari bloquent souvent la lecture automatique, sauf si la vidéo est muette. Pour répondre aux exigences des navigateurs et aux normes d'accessibilité, les vidéos en lecture automatique doivent démarrer sans son et inclure des commandes de lecture visibles.

De nombreux constructeurs de pages et plugins vidéo, y compris SeedProd, vous permettent de basculer les paramètres de lecture automatique et de mise en sourdine directement dans le panneau des paramètres du bloc.

Guides WordPress plus utiles

Vous avez intégré une vidéo, elle se charge rapidement et elle ne dégradera pas votre score de vitesse de page. Vous êtes maintenant dans une meilleure position que la plupart des sites WordPress qui se contentent de coller une URL en espérant le meilleur.

Si vous souhaitez un contrôle maximal sur le placement des vidéos sur les pages de destination, les barres latérales et les modèles de thèmes, Obtenez SeedProd et vous pourrez tout configurer en un après-midi.

Si vous recherchez d'autres moyens d'améliorer votre site WordPress, vous trouverez peut-être les guides suivants utiles :

• Comment intégrer des vidéos Facebook dans WordPress
• Comment ajouter des icônes de médias sociaux personnalisées WordPress à votre site Web
• Comment sécuriser votre site WordPress
• Comment obtenir de l'aide pour WordPress (pour débutants)

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.