Comment mettre une vidéo sur WordPress : guide complet

Sommaire de l'article

Introduction

Intégrer une vidéo sur votre site WordPress est une excellente manière d'améliorer l’expérience utilisateur, d’augmenter le temps passé sur vos pages et de renforcer la visibilité de votre site dans les résultats des moteurs de recherche. Les vidéos attirent l’attention, expliquent vos contenus de façon plus claire et rendent vos pages beaucoup plus engageantes.

Pour obtenir ces résultats, il ne suffit pas de « poser » une vidéo dans un article. Il est essentiel de choisir la bonne méthode d’intégration, d’optimiser le fichier vidéo, de soigner la structure de vos contenus et d’appliquer quelques bonnes pratiques techniques etéditoriales.

Dans cet article, vous découvrirez pas à pas comment mettre une vidéo sur WordPress, que ce soit via YouTube, Vimeo ou un fichier hébergé sur votre propre serveur. Vous verrezégalement les bonnes pratiques d’optimisation, les points techniques importants et les outils utiles pour améliorer la qualité de vos vidéos et les performances de votre site.

Concepts clés pour intégrer une vidéo sur WordPress

Avant de passer aux tutoriels pratiques, il est important de bien comprendre quelques notions essentielles liées à l’intégration vidéo dans WordPress.

L’auto-embed WordPress : WordPress est capable d’intégrer automatiquement une vidéo simplement en collant l’URL d’une plateforme compatible (YouTube, Vimeo, etc.) dans l’éditeur de blocs (Gutenberg) ou dans l’éditeur classique. Le système récupère automatiquement le code d’intégration sans que vous ayez à toucher au HTML.
L’embedding de vidéos (intégration externe) : il s’agit d’afficher dans une page ou un article WordPress une vidéo hébergée sur une plateforme tierce (YouTube, Vimeo, Dailymotion, etc.) au moyen d’une URL ou d’un code d’intégration (code </code>).</li> <li><strong>L’hébergement local de vidéos</strong> : WordPress permet aussi de téléverser un fichier vidéo directement dans la bibliothèque de médias (par exemple un fichier MP4) et de l’afficher via un bloc « Vidéo ». Cette méthode donne davantage de contrôle, mais consomme de l’espace disque, de la bande passante et peut impacter la performance si les fichiers sont trop lourds ou mal optimisés.</li> <li><strong>L’optimisation des vidéos</strong> : pour préserver la vitesse de chargement du site et la qualité visuelle, il est indispensable de compresser les fichiers vidéo, de choisir un format adapté (MP4/H.264 le plus souvent) et de dimensionner correctement la résolution et le débit.</li> <li><strong>La SEO des vidéos</strong> : les vidéos peuventêtre optimisées pour les moteurs de recherche grâce à des titres pertinents, des descriptions détaillées, des mots-clés stratégiques, des transcriptions textuelles et une bonne structure de page.</li> </ul> <p>Bien maîtriser ces concepts vous permettra de choisir la meilleure approche pour intégrer vos vidéos sur WordPress, en fonction de vos objectifs, de vos ressources techniques et de l’hébergement utilisé.</p> <h2 id="les-differentes-manieres-de-mettre-une-video-sur-wordpress">Les différentes manières de mettre une vidéo sur WordPress</h2> <p>Il existe plusieurs méthodes pour ajouter une vidéo à un article, une page ou une zone widget de votre site WordPress. Les principales approches sont les suivantes :</p> <ul> <li>copier-coller l’URL d’une vidéo YouTube, Vimeo ou autre plateforme compatible ;</li> <li>utiliser les blocs intégrés de l’éditeur Gutenberg (bloc « Vidéo », bloc « YouTube », bloc « Vimeo », bloc « Intégration ») ;</li> <li>intégrer un code HTML <code><iframe></code> dans un bloc « HTML personnalisé » ;</li> <li>téléverser une vidéo dans la bibliothèque de médias et l’afficher via le bloc « Vidéo » ;</li> <li>ajouter une vidéo dans un widget ou une zone de barre latérale ;</li> <li>passer par un plugin spécialisé pour des fonctionnalités avancées (galeries, popups, flux YouTube, etc.).</li> </ul> <h2 id="comment-integrer-une-video-youtube-ou-vimeo-avec-l-url-auto-embed">Comment intégrer une vidéo YouTube ou Vimeo avec l’URL (auto-embed)</h2> <p>La méthode la plus simple et la plus rapide pour mettre une vidéo sur WordPress consiste à utiliser la fonctionnalité d’auto-embed intégrée.</p> <h3 id="etapes-avec-l-editeur-de-blocs-gutenberg">Étapes avec l’éditeur de blocs (Gutenberg)</h3> <ol> <li>Connectez-vous à votre tableau de bord WordPress avec un compte ayant les droits d’éditeur ou d’administrateur.</li> <li>Ouvrez l’article ou la page dans laquelle vous souhaitez insérer la vidéo, ou créez un nouveau contenu.</li> <li>Dans un nouvel emplacement de contenu, ajoutez un bloc paragraphe ou cliquez simplement dans une zone vide de l’éditeur.</li> <li>Allez sur YouTube, Vimeo ou une autre plateforme compatible, puis copiez l’URL complète de la vidéo depuis la barre d’adresse de votre navigateur.</li> <li>Revenez dans l’éditeur WordPress et collez directement l’URL à l’endroit où vous souhaitez que la vidéo apparaisse.</li> <li>WordPress détecte automatiquement l’URL et la transforme en bloc vidéo intégré, avec un aperçu directement dans l’éditeur.</li> <li>Modifiez le reste de votre contenu si nécessaire, puis cliquez sur « Mettre à jour » ou « Publier » pour mettre en ligne la page.</li> </ol> <h3 id="etapes-avec-l-editeur-classique">Étapes avec l’éditeur classique</h3> <ol> <li>Ouvrez l’article ou la page dans l’éditeur classique.</li> <li>Assurez-vous d’être dans l’onglet « Visuel » (et non dans l’onglet « Texte »).</li> <li>Collez l’URL complète de la vidéo YouTube ou Vimeo à l’endroit exact où vous souhaitez qu’elle s’affiche.</li> <li>WordPress convertit automatiquement l’URL en lecteur vidéo intégré à l’enregistrement de l’article.</li> <li>Enregistrez puis mettez à jour ou publiez votre contenu.</li> </ol> <p>Cette méthode présente l’avantage d’être extrêmement simple à utiliser, sans nécessiter de code ni de plugin supplémentaire. Elle convient à la grande majorité des besoins courants.</p> <h2 id="utiliser-les-blocs-video-de-gutenberg">Utiliser les blocs vidéo de Gutenberg</h2> <p>L’éditeur de blocs Gutenberg propose plusieurs blocs dédiés à l’intégration de vidéos. Ils offrent un contrôle visuel plus précis et des options supplémentaires.</p> <h3 id="bloc-video-pour-une-video-hebergee-sur-votre-site">Bloc « Vidéo » pour une vidéo hébergée sur votre site</h3> <p>Le bloc « Vidéo » de WordPress permet d’afficher un fichier vidéo provenant de votre bibliothèque de médias ou importé depuis votre ordinateur.</p> <ol> <li>Dans l’éditeur de blocs, cliquez sur le bouton « + » pour ajouter un nouveau bloc.</li> <li>Recherchez « Vidéo » dans la barre de recherche de blocs.</li> <li>Choisissez le bloc « Vidéo ».</li> <li>Cliquez sur « Téléverser » pour importer un nouveau fichier vidéo depuis votre ordinateur, ou sur « Bibliothèque de médias » pour sélectionner une vidéo déj à envoyée sur votre site.</li> <li>Une fois la vidéo sélectionnée, un lecteur natif HTML5 s’affiche dans l’éditeur.</li> <li>Dans la colonne de droite, vous pouvez régler quelques options : lecture automatique, boucle, affichage des contrôles, etc. (selon le thème et la version de WordPress).</li> <li>Enregistrez ou publiez votre page.</li> </ol> <p>Cette solution est particulièrement adaptée aux vidéos courtes, légères et peu nombreuses. Pour un volume important de vidéos ou des fichiers lourds en haute définition, il est généralement préférable d’utiliser une plateforme externe pour ne pas surcharger votre hébergement.</p> <h3 id="blocs-d-integration-youtube-vimeo-etc">Blocs d’intégration (YouTube, Vimeo, etc.)</h3> <p>Gutenberg propose des blocs dédiés aux principales plateformes vidéo :</p> <ul> <li>bloc « YouTube » ;</li> <li>bloc « Vimeo » ;</li> <li>bloc « Dailymotion » ;</li> <li>bloc « Intégration » pour d’autres services compatibles.</li> </ul> <p>Le fonctionnement est similaire pour chaque bloc :</p> <ol> <li>Ajoutez un nouveau bloc et choisissez « YouTube », « Vimeo » ou un autre bloc d’intégration.</li> <li>Collez l’URL de la vidéo dans le champ prévu.</li> <li>Cliquez sur le bouton pour intégrer la vidéo.</li> <li>WordPress affiche un aperçu de la vidéo directement dans l’éditeur.</li> </ol> <p>Ces blocs sont utiles si vous souhaitez garder votre structure très claire ou si vous préférez distinguer les contenus texte des contenus vidéo dans l’éditeur.</p> <h2 id="inserer-une-video-via-un-code-html">Insérer une vidéo via un code HTML <iframe></h2> <p>Les plateformes vidéo proposent souvent un code d’intégration de type <code><iframe></code>, qui permet de personnaliser davantage l’affichage (dimensions, options du lecteur, etc.). Vous pouvez utiliser ce code directement dans WordPress.</p> <h3 id="recuperer-le-code-d-integration">Récupérer le code d’intégration</h3> <ul> <li>Sur YouTube, ouvrez la vidéo souhaitée, cliquez sur « Partager », puis sur « Intégrer » pour afficher le code <code><iframe></code>.</li> <li>Copiez l’intégralité du code proposé par la plateforme.</li> </ul> <h3 id="ajouter-le-code-dans-wordpress-avec-gutenberg">Ajouter le code dans WordPress avec Gutenberg</h3> <ol> <li>Dans l’éditeur de blocs, ajoutez un bloc « HTML personnalisé ».</li> <li>Collez le code <code><iframe></code> dans ce bloc.</li> <li>Cliquez sur « Aperçu » pour vérifier l’affichage de la vidéo.</li> <li>Enregistrez ou publiez votre contenu.</li> </ol> <h3 id="ajouter-le-code-avec-l-editeur-classique">Ajouter le code avec l’éditeur classique</h3> <ol> <li>Dans l’éditeur classique, basculez sur l’onglet « Texte » (mode HTML).</li> <li>Placez le curseur à l’endroit souhaité et collez le code <code><iframe></code>.</li> <li>Revenezéventuellement à l’onglet « Visuel » pour vérifier l’emplacement de la vidéo.</li> <li>Enregistrez puis mettez à jour ou publiez la page.</li> </ol> <p>L’intégration par <code><iframe></code> est utile si vous avez besoin d’options spécifiques proposées par la plateforme, comme la désactivation des vidéos suggérées, le démarrage à un temps précis, ou l’intégration d’un lecteur avec un habillage personnalisé.</p> <h2 id="inserer-une-video-dans-un-widget-ou-une-barre-laterale">Insérer une vidéo dans un widget ou une barre latérale</h2> <p>En plus des articles et des pages, il est possible d’ajouter une vidéo dans une zone de widget, par exemple dans une barre latérale ou un pied de page.</p> <h3 id="ajouter-une-video-avec-le-widget-video">Ajouter une vidéo avec le widget « Vidéo »</h3> <ol> <li>Dans le tableau de bord WordPress, allez dans « Apparence » puis « Widgets » (ou « Apparence » → « Personnaliser » → « Widgets » selon votre thème).</li> <li>Repérez la zone de widget (sidebar, footer, etc.) dans laquelle vous souhaitez insérer la vidéo.</li> <li>Ajoutez un widget « Vidéo » à cette zone.</li> <li>Dans le widget, vous pouvez soit téléverser un fichier vidéo depuis votre ordinateur, soit utiliser l’option « Insérer à partir de l’URL » pour intégrer une vidéo YouTube ou similaire.</li> <li>Donnezéventuellement un titre à votre widget vidéo.</li> <li>Enregistrez les modifications et prévisualisez votre site.</li> </ol> <p>Cette méthode est particulièrement pratique pour afficher une vidéo de présentation, un tutoriel phare ou une bande-annonce dans une colonne latérale ou un pied de page.</p> <h2 id="heberger-une-video-directement-sur-wordpress-avantages-et-limites">Héberger une vidéo directement sur WordPress : avantages et limites</h2> <p>L’hébergement local d’une vidéo consiste à téléverser le fichier directement sur votre serveur via la bibliothèque de médias, puis à l’afficher avec le bloc « Vidéo » ou un lecteur HTML5.</p> <h3 id="avantages-de-l-hebergement-local">Avantages de l’hébergement local</h3> <ul> <li>plein contrôle sur le fichier et son accessibilité ;</li> <li>pas de publicités ou de suggestions de vidéos externes ;</li> <li>meilleure maîtrise de la confidentialité si la vidéo ne doit pasêtre publique sur une plateforme tierce.</li> </ul> <h3 id="inconvenients-et-precautions">Inconvénients et précautions</h3> <ul> <li>consommation importante de bande passante si la vidéo est très visionnée ;</li> <li>poids des fichiers qui peut saturer rapidement l’espace disque de votre hébergement ;</li> <li>risque de ralentir le site si les vidéos ne sont pas correctement compressées ;</li> <li>moins d’avantages en termes de découverte organique qu’une publication sur YouTube ou une autre plateforme populaire.</li> </ul> <p>Dans la plupart des cas, il est recommandé d’utiliser une plateforme spécialisée pour l’hébergement des vidéos (YouTube, Vimeo, etc.) et d’intégrer la vidéo sur votre site. Vous bénéficiez ainsi de l’infrastructure optimisée de la plateforme tout en profitant du trafic sur votre site.</p> <h2 id="bonnes-pratiques-pour-optimiser-vos-videos-sur-wordpress">Bonnes pratiques pour optimiser vos vidéos sur WordPress</h2> <p>Au-del à de l’intégration technique, quelques bonnes pratiques vous aideront à améliorer la performance et la visibilité de vos contenus vidéo.</p> <h3 id="optimiser-le-fichier-video-avant-la-mise-en-ligne">Optimiser le fichier vidéo avant la mise en ligne</h3> <p>Avant de téléverser une vidéo ou de la mettre sur YouTube, prenez le temps de l’optimiser.</p> <ul> <li><strong>Compresser la vidéo</strong> : utilisez des outils de compression vidéo spécialisés pour réduire le poids du fichier sans perdre en qualité perceptible. Une compression efficace permet de diminuer le temps de chargement, surtout sur mobile et sur les connexions lentes.</li> <li><strong>Choisir le bon format</strong> : le format MP4 avec le codec H.264 (et audio AAC) est aujourd’hui l’un des plus compatibles avec les navigateurs et les lecteurs HTML5. Il offre un bonéquilibre entre qualité et taille.</li> <li><strong>Adapter la résolution</strong> : pour une intégration en plein contenu, une résolution de 1080p est souvent suffisante. Pour une vidéo intégrée dans une petite colonne, une résolution plus basse peutêtre envisagée afin de réduire la taille du fichier.</li> <li><strong>Régler le débit vidéo (bitrate)</strong> : un débit tropélevé alourdit inutilement la vidéo. Adaptez-le à la résolution et à la nature du contenu (images statiques, animations, mouvements rapides, etc.).</li> </ul> <h3 id="ameliorer-la-structure-de-votre-site-pour-les-videos">Améliorer la structure de votre site pour les vidéos</h3> <p>Une structure claire facilite la navigation et aide les moteurs de recherche à comprendre vos contenus.</p> <ul> <li><strong>Utiliser des catégories et desétiquettes pertinentes</strong> : si vous publiez régulièrement des vidéos, créez une catégorie dédiée (par exemple « Tutoriels vidéo », « Webinaires », « Démonstrations produits ») et utilisez desétiquettes précises pour décrire le sujet de chaque vidéo.</li> <li><strong>Créer une page ou une section dédiée aux vidéos</strong> : regrouper vos vidéos dans une page ou une section spécifique permet aux visiteurs de retrouver facilement l’ensemble de vos contenus vidéo.</li> <li><strong>Intégrer des liens internes</strong> : reliez vos articles contenant des vidéos entre eux, ou faites des liens vers vos pages piliers correspondantes. Cela améliore la navigation pour vos visiteurs et renforce la cohérence thématique de votre site.</li> </ul> <h3 id="creer-du-contenu-video-de-qualite">Créer du contenu vidéo de qualité</h3> <p>La qualité de la vidéo elle-même reste un facteur déterminant pour l’engagement des visiteurs.</p> <ul> <li><strong>Fournir une réelle valeur ajoutée</strong> : vos vidéos doivent répondre à une question, résoudre un problème, expliquer un concept ou présenter un produit de manière utile. Plus elles sont pertinentes, plus elles seront regardées, partagées et commentées.</li> <li><strong>Soigner le titre de la vidéo</strong> : sur YouTube comme sur votre site, un titre clair, précis et attractif augmente le taux de clic. Évitez les titres trompeurs et privilégiez les formulations qui décrivent réellement le contenu.</li> <li><strong>Rédiger une description détaillée</strong> : accompagnez chaque vidéo d’un texte explicatif. Ce texte aide les visiteurs à comprendre le contenu sans lancer la vidéo et permet aux moteurs de recherche d’indexer correctement la page.</li> <li><strong>Ajouter une transcription ou un résumé</strong> : si possible, proposez un résuméécrit ou une transcription de la vidéo. Cela améliore l’accessibilité pour les personnes qui ne peuvent pas activer le son, et enrichit votre contenu textuel.</li> </ul> <h2 id="bonnes-pratiques-pour-la-performance-et-l-experience-utilisateur">Bonnes pratiques pour la performance et l’expérience utilisateur</h2> <p>L’ajout de vidéos peut rapidement alourdir vos pages si vous ne prenez pas quelques précautions. Voici quelques conseils pour préserver la performance de votre site.</p> <h3 id="limiter-les-videos-auto-hebergees-lourdes">Limiter les vidéos auto-hébergées lourdes</h3> <p>Évitez de téléverser des fichiers très lourds directement dans WordPress, surtout si votre hébergement est limité en ressources. Lorsque c’est possible, préférez une plateforme d’hébergement vidéo externe.</p> <h3 id="utiliser-le-chargement-differe-lazy-load">Utiliser le chargement différé (lazy load)</h3> <p>Le chargement différé des vidéos permet de ne charger le lecteur qu’au moment où l’internaute s’en approche visuellement, ce qui améliore la vitesse d’affichage initiale de la page. De nombreux thèmes et plugins de performance proposent cette fonctionnalité, notamment pour les vidéos YouTube intégrées.</p> <h3 id="soigner-la-mise-en-page-autour-de-la-video">Soigner la mise en page autour de la vidéo</h3> <ul> <li>ajoutez un titre clair au-dessus de la vidéo pour annoncer le sujet ;</li> <li>évitez de placer trop d’éléments distrayants autour du lecteur (publicités agressives, popups envahissants) ;</li> <li>prévoyez un texte d’introduction avant la vidéo pour inciter au visionnage ;</li> <li>ajoutez un résumé ou des points clés en dessous pour les lecteurs pressés.</li> </ul> <h2 id="outils-et-ressources-pour-optimiser-vos-videos">Outils et ressources pour optimiser vos vidéos</h2> <p>Plusieurs outils peuvent vous aider à préparer, compresser et intégrer vos vidéos de manière professionnelle.</p> <h3 id="outils-d-optimisation-et-d-edition-video">Outils d’optimisation et d’édition vidéo</h3> <ul> <li><strong>Outils de compression vidéo en ligne</strong> : de nombreux services en ligne permettent de réduire la taille de vos fichiers vidéo tout en conservant une bonne qualité visuelle. Ils sont pratiques si vous ne disposez pas d’un logiciel de montage avancé.</li> <li><strong>Logiciels de montage vidéo</strong> : utiliser un logiciel de montage, même simple, vous permet de couper les parties inutiles, d’ajouter des titres, de corriger la luminosité et d’exporter au bon format. Une vidéo mieux montée sera plus agréable à regarder et plus efficace.</li> <li><strong>Banques de musiques et effets sonores libres de droits</strong> : pour améliorer l’impact de vos vidéos, vous pouvez intégrer une musique de fond ou des effets sonores, à condition de respecter les licences d’utilisation.</li> </ul> <h3 id="plugins-wordpress-pour-aller-plus-loin">Plugins WordPress pour aller plus loin</h3> <p>Bien que WordPress permette d’intégrer des vidéos sans plugin, certains modules complémentaires peuvent offrir des fonctionnalités avancées :</p> <ul> <li>création de galeries vidéo filtrables ;</li> <li>affichage de vidéos en popup ou lightbox ;</li> <li>intégration d’un flux complet de vidéos YouTube ou d’une chaîne ;</li> <li>ajout de chapitrage ou de playlists vidéo ;</li> <li>gestion de la mise en cache et du chargement différé des vidéos.</li> </ul> <p>Choisissez vos plugins avec soin : vérifiez la compatibilité avec votre version de WordPress, la fréquence des mises à jour, les avis des utilisateurs et l’impact potentiel sur les performances.</p> <h2 id="integrer-une-video-dans-differents-contextes-wordpress">Intégrer une vidéo dans différents contextes WordPress</h2> <p>Selon le type de site et vos objectifs, la manière d’utiliser les vidéos peut varier.</p> <h3 id="dans-un-article-de-blog">Dans un article de blog</h3> <p>Pour un article de blog, la vidéo est souvent utilisée pour illustrer le sujet, proposer un tutoriel ou donner un exemple concret. Placez la vidéo après une courte introduction, puis développez le contenu en texte. Cela permet aux lecteurs de choisir de regarder ou de lire selon leurs préférences.</p> <h3 id="sur-une-page-de-vente-ou-de-presentation">Sur une page de vente ou de présentation</h3> <p>Sur une page de vente, une vidéo de démonstration ou un témoignage client peut augmenter considérablement la confiance et le taux de conversion. Intégrez la vidéo dans la partie haute de la page pour qu’elle soit rapidement visible, puis détaillez ses points clés dans le reste du contenu.</p> <h3 id="dans-une-zone-membre-ou-un-espace-de-formation">Dans une zone membre ou un espace de formation</h3> <p>Si vous proposez des formations en ligne, des tutoriels ou un espace membre, les vidéos peuvent constituer le cœur de votre offre. Dans ce cas, privilégiez une structure claire : leçon par leçon, avec une vidéo principale et des ressources téléchargeables associées.</p> <h3 id="dans-une-barre-laterale-ou-un-pied-de-page">Dans une barre latérale ou un pied de page</h3> <p>Une vidéo de présentation courte, placée dans un widget de barre latérale ou de pied de page, peut servir à présenter votre activité, votre chaîne YouTube ou un contenu phare. Veillez simplement à ne pas surcharger ces zones pour ne pas distraire le visiteur du contenu principal.</p> <h2 id="conseils-de-redaction-autour-de-la-video">Conseils de rédaction autour de la vidéo</h2> <p>Pour que vos vidéos soient efficaces sur WordPress, le texte qui les entoure joue un rôle déterminant.</p> <h3 id="rediger-une-introduction-claire">Rédiger une introduction claire</h3> <p>Avant la vidéo, expliquez en quelques lignes :</p> <ul> <li>le sujet traité ;</li> <li>à qui s’adresse la vidéo ;</li> <li>ce que le visiteur va apprendre ou découvrir en la regardant.</li> </ul> <h3 id="structurer-le-texte-autour-de-la-video">Structurer le texte autour de la vidéo</h3> <p>Après la vidéo, développez les points importants abordés, sous forme de sections, de listes ou de questions-réponses. Cette approche permet :</p> <ul> <li>d’aider les personnes qui préfèrent lire plutôt que regarder une vidéo ;</li> <li>d’améliorer l’accessibilité pour les personnes ayant des difficultés auditives ou visuelles ;</li> <li>d’enrichir votre page avec du contenu textuel détaillé.</li> </ul> <h3 id="ajouter-des-appels-a-l-action">Ajouter des appels à l’action</h3> <p>Selon vos objectifs, vous pouvez inciter les visiteurs à :</p> <ul> <li>s’abonner à votre newsletter ;</li> <li>télécharger un guide complémentaire ;</li> <li>découvrir un autre article ou une autre vidéo ;</li> <li>demander un devis ou réserver un appel.</li> </ul> <p>Placez ces appels à l’action de manière naturelle, sans interrompre le visionnage, par exemple sous la vidéo ou à la fin de votre article.</p> <h2 id="conclusion">Conclusion</h2> <p>Mettre une vidéo sur WordPress est aujourd’hui à la portée de tous, grâce aux fonctionnalités d’auto-embed, aux blocs vidéo de l’éditeur Gutenberg et aux possibilités d’intégration via des codes <code><iframe></code> ou des widgets. En choisissant la bonne méthode et en appliquant les bonnes pratiques d’optimisation, vous pouvez enrichir vos pages, améliorer l’expérience utilisateur et renforcer la visibilité de votre site.</p> <p>Prenez le temps de préparer vos vidéos, d’optimiser leurs fichiers, de soigner les titres et descriptions, puis d’intégrer les vidéos dans une structure de contenu claire et cohérente. Vous disposerez ainsi d’un atout puissant pour capter l’attention de vos visiteurs, transmettre vos messages et développer votre présence en ligne avec WordPress.</p> </div>  <div class="mt-12 pt-8 border-t border-gray-200"> <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2"> <i class="fas fa-newspaper text-purple-600"></i> Articles similaires </h2> <div class="grid gap-4"> <a href="/blog/comment-mettre-wordpress-en-francais-guide-complet/" class="block p-4 bg-white rounded-lg border border-gray-200 hover:border-purple-300 hover:shadow-md transition"> <span class="text-purple-600 font-semibold hover:text-purple-800">Comment mettre WordPress en français (guide complet)</span> </a> <a href="/blog/comment-mettre-un-logo-sur-wordpress-guide-complet/" class="block p-4 bg-white rounded-lg border border-gray-200 hover:border-purple-300 hover:shadow-md transition"> <span class="text-purple-600 font-semibold hover:text-purple-800">Comment Mettre Un Logo Sur WordPress (Guide Complet)</span> </a> <a href="/blog/comment-mettre-des-icone-sur-wordpress/" class="block p-4 bg-white rounded-lg border border-gray-200 hover:border-purple-300 hover:shadow-md transition"> <span class="text-purple-600 font-semibold hover:text-purple-800">comment mettre des icone sur wordpress</span> </a> </div> </div>  <div class="mt-12 pt-8 border-t border-gray-200"> <div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl p-8 text-center text-white"> <h3 class="text-2xl font-bold mb-4">Besoin d'aide avec votre SEO ?</h3> <p class="mb-6 text-purple-100">Notreéquipe d'experts peut vous aider à optimiser votre site e-commerce</p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <a href="/seo-ecommerce" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition inline-block"> Découvrir nos services SEO </a> <a href="/#contact" class="bg-purple-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-900 transition inline-block"> Nous contacter </a> </div> </div> </div> </article>  <div class="mt-12 max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 md:p-12"> <h2 class="text-3xl font-bold text-gray-900 mb-6 flex items-center gap-3"> <i class="fas fa-comments text-purple-600"></i> Commentaires </h2>  <div id="comments-list" class="mb-8 space-y-6">  </div>  <div class="border-t border-gray-200 pt-8"> <h3 class="text-xl font-semibold text-gray-900 mb-4">Laisser un commentaire</h3> <form id="comment-form" class="space-y-4"> <input type="hidden" id="article-slug" value="comment-mettre-une-video-sur-wordpress-guide-complet"> <div class="grid md:grid-cols-2 gap-4"> <div> <label for="comment-name" class="block text-sm font-medium text-gray-700 mb-2">Nom *</label> <input type="text" id="comment-name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> </div> <div> <label for="comment-email" class="block text-sm font-medium text-gray-700 mb-2">Email *</label> <input type="email" id="comment-email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> </div> </div> <div> <label for="comment-message" class="block text-sm font-medium text-gray-700 mb-2">Message *</label> <textarea id="comment-message" name="message" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"></textarea> </div> <div class="text-sm text-gray-600"> <i class="fas fa-info-circle text-purple-600"></i> Votre commentaire sera soumis à modération avant publication. </div> <button type="submit" class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition inline-flex items-center gap-2"> <i class="fas fa-paper-plane"></i> Publier le commentaire </button> </form> <div id="comment-status" class="mt-4 hidden"></div> </div> </div>  <div class="mt-12 max-w-4xl mx-auto"> <a href="/blog" class="inline-flex items-center gap-2 text-purple-600 hover:text-purple-800 transition font-semibold"> <i class="fas fa-arrow-left"></i> Retour au blog </a> </div> </div> </section>  <script> const articleSlug = 'comment-mettre-une-video-sur-wordpress-guide-complet'; // Charger les commentaires approuvés async function loadComments() { try { const response = await fetch(`/gestion-commentaires/get-comments.php?slug=${articleSlug}`); const data = await response.json(); const commentsList = document.getElementById('comments-list'); if (data.success && data.comments.length > 0) { commentsList.innerHTML = data.comments.map(comment => ` <div class="border-l-4 border-purple-600 pl-4 py-2"> <div class="flex items-center gap-2 mb-2"> <strong class="text-gray-900">${comment.name}</strong> <span class="text-sm text-gray-500">•</span> <span class="text-sm text-gray-500">${new Date(comment.date).toLocaleDateString('fr-FR')}</span> </div> <p class="text-gray-700">${comment.message}</p> </div> `).join(''); } else { commentsList.innerHTML = '<p class="text-gray-500 italic">Aucun commentaire pour le moment. Soyez le premier à commenter !</p>'; } } catch (error) { console.error('Erreur lors du chargement des commentaires:', error); } } // Gérer la soumission du formulaire document.getElementById('comment-form').addEventListener('submit', async function(e) { e.preventDefault(); const formData = { slug: articleSlug, name: document.getElementById('comment-name').value, email: document.getElementById('comment-email').value, message: document.getElementById('comment-message').value }; const submitBtn = this.querySelector('button[type="submit"]'); const originalText = submitBtn.innerHTML; submitBtn.disabled = true; submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi en cours...'; try { const response = await fetch('/gestion-commentaires/submit-comment.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); const result = await response.json(); const messageDiv = document.getElementById('comment-status'); if (result.success) { messageDiv.className = 'mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg'; messageDiv.textContent = 'Merci ! Votre commentaire aété soumis et sera publié après modération.'; messageDiv.classList.remove('hidden'); this.reset(); } else { messageDiv.className = 'mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg'; messageDiv.textContent = result.message || 'Une erreur est survenue. Veuillez réessayer.'; messageDiv.classList.remove('hidden'); } } catch (error) { const messageDiv = document.getElementById('comment-status'); messageDiv.className = 'mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg'; messageDiv.textContent = 'Erreur de connexion. Veuillez réessayer plus tard.'; messageDiv.classList.remove('hidden'); } finally { submitBtn.disabled = false; submitBtn.innerHTML = originalText; } }); // Charger les commentaires au chargement de la page loadComments(); </script> <footer class="bg-gray-950 text-gray-400 py-12"> <div class="container mx-auto px-6"> <div class="flex flex-col md:flex-row justify-between items-center"> <div class="mb-6 md:mb-0 flex items-start gap-4"> <img src="/images/logo.png" alt="Logo VRAIVEX" class="h-32 w-32 md:h-40 md:w-40 object-contain"> <div> <a href="#" class="text-2xl font-bold block"> <span class="gradient-text">VRAIVEX</span> </a> <p class="mt-2 text-sm">Automatisation, IA et SEO au service de la performance e-commerce</p> </div> </div> <div class="flex flex-col items-center md:items-end"> <div class="grid grid-cols-2 md:flex md:flex-wrap gap-3 md:space-x-6 mb-4 text-center md:text-right"> <a href="/#about" class="hover:text-white transition text-sm">À propos</a> <a href="/#services" class="hover:text-white transition text-sm">Services</a> <a href="/#prestations" class="hover:text-white transition text-sm">Prestations</a> <a href="/#bestsellers" class="hover:text-white transition text-sm">Best Sellers</a> <a href="/#realisations" class="hover:text-white transition text-sm">Réalisations</a> <a href="/#brands" class="hover:text-white transition text-sm">Nos Sites</a> <a href="/creation-site-ecommerce" class="hover:text-white transition text-sm">Création Sites</a> <a href="/seo-ecommerce" class="hover:text-white transition text-sm">SEO E-commerce</a> <a href="/partenaires" class="hover:text-white transition text-sm">Partenaires</a> <a href="/#contact" class="hover:text-white transition text-sm">Contact</a> </div> <p class="text-sm text-center md:text-right">© 2026 VRAIVEX. Tous droits réservés.</p> </div> </div> </div> </footer>  <button id="backToTop" class="fixed bottom-8 right-8 bg-gradient-to-r from-purple-600 to-blue-600 text-white p-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-300 z-50 hidden"> <i class="fas fa-arrow-up text-xl"></i> </button> <script> // Header scroll effect window.addEventListener('scroll', function() { const header = document.getElementById('header'); if (window.scrollY > 100) { header.classList.add('header-scrolled'); } else { header.classList.remove('header-scrolled'); } }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Mobile menu toggle const mobileMenuButton = document.getElementById('mobileMenuButton'); const mobileMenu = document.getElementById('mobileMenu'); const menuIcon = document.getElementById('menuIcon'); if (mobileMenuButton && mobileMenu) { mobileMenuButton.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); // Toggle icon between bars and times if (mobileMenu.classList.contains('hidden')) { menuIcon.classList.remove('fa-times'); menuIcon.classList.add('fa-bars'); } else { menuIcon.classList.remove('fa-bars'); menuIcon.classList.add('fa-times'); } }); // Close menu when clicking on a link const mobileLinks = mobileMenu.querySelectorAll('a'); mobileLinks.forEach(link => { link.addEventListener('click', function() { mobileMenu.classList.add('hidden'); menuIcon.classList.remove('fa-times'); menuIcon.classList.add('fa-bars'); }); }); } // Brands Carousel const brandsCarousel = document.getElementById('brandsCarousel'); const brandsContainer = document.getElementById('brandsContainer'); const brandsPrevBtn = document.getElementById('brandsPrevBtn'); const brandsNextBtn = document.getElementById('brandsNextBtn'); const brandsPrevBtnMobile = document.getElementById('brandsPrevBtnMobile'); const brandsNextBtnMobile = document.getElementById('brandsNextBtnMobile'); if (brandsContainer && brandsCarousel) { let currentIndex = 0; const cards = brandsContainer.querySelectorAll('.brand-card'); const gap = 24; const cardsPerView = { mobile: 1, tablet: 2, desktop: 3, large: 4 }; function getCardsPerView() { const w = window.innerWidth; if (w >= 1280) return cardsPerView.large; if (w >= 1024) return cardsPerView.desktop; if (w >= 768) return cardsPerView.tablet; return cardsPerView.mobile; } function getCardWidth() { const cpv = getCardsPerView(); const cw = brandsCarousel.offsetWidth; return (cw - gap * (cpv - 1)) / cpv; } function updateCarousel() { const cpv = getCardsPerView(); const cardW = getCardWidth(); const maxIdx = Math.max(0, cards.length - cpv); currentIndex = Math.min(currentIndex, maxIdx); const offset = currentIndex * (cardW + gap); brandsContainer.style.transform = `translateX(-${offset}px)`; const atStart = currentIndex === 0; const atEnd = currentIndex >= maxIdx; [brandsPrevBtn, brandsPrevBtnMobile].forEach(function(btn) { if (btn) { btn.style.opacity = atStart ? '0.4' : '1'; btn.style.pointerEvents = atStart ? 'none' : 'auto'; } }); [brandsNextBtn, brandsNextBtnMobile].forEach(function(btn) { if (btn) { btn.style.opacity = atEnd ? '0.4' : '1'; btn.style.pointerEvents = atEnd ? 'none' : 'auto'; } }); if (document.getElementById('brandsCounter')) { document.getElementById('brandsCounter').textContent = (currentIndex + 1) + ' / ' + (maxIdx + 1); } } function nextSlide() { const cpv = getCardsPerView(); const maxIdx = Math.max(0, cards.length - cpv); if (currentIndex < maxIdx) { currentIndex++; updateCarousel(); } } function prevSlide() { if (currentIndex > 0) { currentIndex--; updateCarousel(); } } if (brandsNextBtn) brandsNextBtn.addEventListener('click', nextSlide); if (brandsPrevBtn) brandsPrevBtn.addEventListener('click', prevSlide); if (brandsNextBtnMobile) brandsNextBtnMobile.addEventListener('click', nextSlide); if (brandsPrevBtnMobile) brandsPrevBtnMobile.addEventListener('click', prevSlide); function setCardWidths() { const cardW = getCardWidth(); cards.forEach(function(card) { card.style.width = cardW + 'px'; card.style.minWidth = cardW + 'px'; card.style.flexShrink = '0'; }); } let touchStartX = 0; let touchEndX = 0; brandsCarousel.addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); brandsCarousel.addEventListener('touchend', function(e) { touchEndX = e.changedTouches[0].screenX; const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { diff > 0 ? nextSlide() : prevSlide(); } }, { passive: true }); setCardWidths(); updateCarousel(); let resizeTimeout; window.addEventListener('resize', function() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function() { setCardWidths(); currentIndex = 0; updateCarousel(); }, 250); }); } </script> <script> // Header scroll effect window.addEventListener('scroll', function() { const header = document.getElementById('header'); if (window.scrollY > 50) { header.classList.add('header-scrolled'); } else { header.classList.remove('header-scrolled'); } }); // Scroll animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); // Observe all fade-in-up elements document.querySelectorAll('.fade-in-up').forEach(el => { observer.observe(el); }); // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Counter animation for stats function animateCounter(element, target, duration = 2000) { let start = 0; const increment = target / (duration / 16); const timer = setInterval(() => { start += increment; if (start >= target) { element.textContent = target + (element.textContent.includes('+') ? '+' : '') + (element.textContent.includes('K') ? 'K€' : ''); clearInterval(timer); } else { element.textContent = Math.floor(start) + (element.textContent.includes('+') ? '+' : '') + (element.textContent.includes('K') ? 'K€' : ''); } }, 16); } // Observe stats section const statsObserver = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting && !entry.target.classList.contains('animated')) { entry.target.classList.add('animated'); const statsCards = entry.target.querySelectorAll('.stats-card'); statsCards.forEach((card, index) => { setTimeout(() => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.transition = 'all 0.6s ease'; card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 100); }, index * 100); }); } }); }, { threshold: 0.3 }); const statsSection = document.querySelector('section.bg-gradient-to-r'); if (statsSection) { statsObserver.observe(statsSection); } </script> <script> // Gestion du formulaire de contact const contactForm = document.getElementById('contact-form'); const formMessage = document.getElementById('form-message'); const submitBtn = document.getElementById('submit-btn'); if (contactForm) { contactForm.addEventListener('submit', async function(e) { e.preventDefault(); // Désactiver le bouton pendant l'envoi submitBtn.disabled = true; submitBtn.textContent = 'Envoi en cours...'; // Récupérer les données du formulaire const formData = new FormData(contactForm); try { // Vérifier que les données sont bien dans le FormData const formDataObj = { name: formData.get('name'), email: formData.get('email'), subject: formData.get('subject'), message: formData.get('message') }; console.log('Données du formulaire:', formDataObj); // Vérifier que tous les champs sont remplis if (!formDataObj.name || !formDataObj.email || !formDataObj.subject || !formDataObj.message) { formMessage.classList.remove('hidden'); formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white'; formMessage.textContent = 'Veuillez remplir tous les champs du formulaire.'; submitBtn.disabled = false; submitBtn.textContent = 'Envoyer le message'; return; } // Essayer d'abord avec JSON (plus fiable) // Siça ne fonctionne pas, on essaiera avec FormData let response; try { // Méthode 1 : Envoyer en JSON (plus fiable selon les forums) response = await fetch('gestion-formulaire-contact/send-email-json.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(formDataObj) }); } catch (jsonError) { console.warn('Erreur avec JSON, essai avec FormData:', jsonError); // Méthode 2 : Fallback avec FormData response = await fetch('send-email.php', { method: 'POST', body: formData }); } // Lire le texte de la réponse d'abord pour déboguer const responseText = await response.text(); console.log('Réponse serveur:', responseText.substring(0, 500)); // Vérifier si la réponse est OK if (!response.ok) { // Essayer de parser le JSON d'erreur try { const errorResult = JSON.parse(responseText); // Afficher le message d'erreur du serveur directement à l'utilisateur formMessage.classList.remove('hidden'); formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white'; formMessage.textContent = errorResult.message || `Erreur ${response.status}: ${response.statusText}`; submitBtn.disabled = false; submitBtn.textContent = 'Envoyer le message'; return; // Sortir de la fonction pour ne pas continuer } catch (e) { throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}. Réponse: ${responseText.substring(0, 200)}`); } } // Vérifier si PHP n'est pas exécuté (le serveur renvoie le code PHP brut) if (responseText.trim().startsWith('<?php') || responseText.includes('<?php')) { console.error('ERREUR: PHP n\'est pas exécuté par le serveur. Le code PHP est renvoyé brut.'); console.error('Le serveur web n\'est pas configuré pour exécuter PHP.'); // Utiliser la solution de secours : sauvegarder dans localStorage const messageData = { name: formData.get('name'), email: formData.get('email'), subject: formData.get('subject'), message: formData.get('message'), timestamp: new Date().toISOString() }; // Sauvegarder dans localStorage comme solution de secours const savedMessages = JSON.parse(localStorage.getItem('vraivex_messages') || '[]'); savedMessages.push(messageData); localStorage.setItem('vraivex_messages', JSON.stringify(savedMessages)); // Afficher un message spécial formMessage.classList.remove('hidden'); formMessage.className = 'mb-6 p-4 rounded-lg bg-yellow-600 text-white'; formMessage.innerHTML = '⚠️ PHP n\'est pas configuré sur le serveur. Votre message aété sauvegardé localement. <br>Veuillez nous contacter directement à <strong>contact@vraivex.fr</strong> ou consulter les messages sauvegardés dans la console du navigateur.'; // Afficher les messages sauvegardés dans la console console.log('Messages sauvegardés localement:', savedMessages); console.log('Pour consulter les messages, tapez dans la console: JSON.parse(localStorage.getItem("vraivex_messages"))'); return; // Sortir de la fonction } // Essayer de parser le JSON let result; try { result = JSON.parse(responseText); } catch (parseError) { console.error('Erreur de parsing JSON:', parseError); console.error('Réponse reçue:', responseText.substring(0, 500)); throw new Error('Le serveur a renvoyé une réponse invalide. Vérifiez la console pour plus de détails.'); } // Afficher le message de résultat formMessage.classList.remove('hidden'); if (result.success) { formMessage.className = 'mb-6 p-4 rounded-lg bg-green-600 text-white'; formMessage.textContent = 'Message envoyé avec succès ! Nous vous répondrons dans les plus brefs délais.'; contactForm.reset(); } else { formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white'; let errorMsg = result.message || 'Une erreur est survenue. Veuillez réessayer.'; // Afficher le message de debug en développement (à retirer en production) if (result.debug) { console.error('Erreur détaillée:', result.debug); } formMessage.textContent = errorMsg; } } catch (error) { formMessage.classList.remove('hidden'); formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white'; // Message d'erreur plus détaillé pour le débogage let errorMsg = 'Une erreur est survenue lors de la communication avec le serveur. '; errorMsg += 'Veuillez réessayer plus tard ou nous contacter directement à contact@vraivex.fr'; // En mode développement, afficher plus de détails if (error.message) { console.error('Erreur détaillée:', error); console.error('Message:', error.message); console.error('Stack:', error.stack); } formMessage.textContent = errorMsg; } finally { // Réactiver le bouton submitBtn.disabled = false; submitBtn.textContent = 'Envoyer le message'; // Masquer le message après 5 secondes setTimeout(() => { formMessage.classList.add('hidden'); }, 5000); } }); } // Back to Top Button functionality const backToTopButton = document.getElementById('backToTop'); // Show/hide button based on scroll position window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { backToTopButton.classList.remove('hidden'); } else { backToTopButton.classList.add('hidden'); } }); // Smooth scroll to top when clicked backToTopButton.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script> </body> </html>