Intégrer des vidéos YouTube dans WordPress

Dans cet article, je vous expliquerai comment et pourquoi intégrer une vidéo YouTube dans WordPress.

Youtube qu’est-ce que c’est ?

De nos jours, si vous ne connaissez pas Youtube c’est que vous devez venir de la planète mars. Mais vu que nous sommes dans le thème, faisons une rapide présentation de cet outil.
Créé en 2005 par deux anciens employés de paypal, ce site d’hébergement de vidéos ligne est racheté un an plus tard par Google. Il est devenu une référence de plateforme vidéo. Clips musicaux, vidéos live, contenu divertissant ou éducatif, Youtube est utilisé par plus de 2 milliards de personnes à travers le monde.

Il se situe bien devant ses principaux concurrents Dailymotion (250 millions d’utilisateurs) ou encore Vimeo (170 millions d’utilisateurs).

Pourquoi intégrer des vidéos YouTube dans WordPress ?

Donner de la crédibilité à votre site

L’intégration de vidéos sur votre site web incite les internautes à passer davantage de temps sur vos pages. Si vous consacrez du temps à explorer un site, cela suggère qu’il vous intéresse, qu’il est pertinent. Sinon, vous l’auriez probablement quitté rapidement. C’est une perception partagée par Google dans son évaluation du contenu.

En effet, plus un internaute reste sur votre site, plus Google interprète celui-ci comme étant pertinent et susceptible d’être mieux positionné dans les résultats de recherche par rapport aux sites de vos concurrents.

Cela met en lumière l’importance de l’expérience utilisateur.

Améliorer l’expérience utilisateur

De plus, certains lecteurs ne sont pas friands de longs articles de 3 000 mots. Une page qui convient une vidéo va attirer des visiteurs qui préfèrent des visuels dynamiques plutôt qu’un long texte. En incorporant des vidéos YouTube dans WordPress, vous diversifiez votre public. Ceux qui pourraient être dissuadés par une grande quantité de texte peuvent être conquis par un autre format. Bien sûr, cet impact est encore plus significatif si la vidéo est la vôtre. Si vous disposez du temps nécessaire, publier vos propres tutoriels sur YouTube et les partager dans votre article écrit peut être une stratégie efficace.

En ce qui concerne vos propres vidéos, lors des recherches effectuées par les internautes, vos contenus YouTube seront plus susceptibles d’apparaître en tête des résultats sur des sujets pertinents. Vous pourrez ainsi vous positionner juste avant les référencements des sites web, souvent en dessous du contenu sponsorisé. C’est une méthode supplémentaire pour renforcer le référencement de votre site. Cela m’amène au point suivant : les backlinks.

Favoriser le netlinking et les backlinks grâce aux vidéos YouTube dans WordPress

Si votre propre vidéo YouTube est relayée sur les réseaux sociaux ou sur d’autres sites, et que cette vidéo comporte un lien redirigeant vers votre site web, vous créez un réseau de liens entrants (backlinks) potentiellement intéressants. Ce processus de netlinking peut être perçu comme bénéfique pour votre référencement.

Un site pointe votre vidéo -> votre vidéo pointe votre site -> Vous pouvez pointer le premier site pour le remercier.

C’est un moyen efficace de générer des backlinks appréciés par les moteurs de recherche, en particulier Google.

Bien entendu, pour que cela soit pertinent, le contenu des vidéos doit être de qualité et doit répondre à un besoin de vos utilisateurs, tout comme tout autre contenu destiné à être référencé. Des vidéos informatives, intéressantes et pertinentes suscitent davantage d’engagement et encouragent les autres sites à les partager, favorisant ainsi la création de backlinks bénéfiques pour votre référencement.

Bien intégrer ses vidéos Viméo ou Youtube dans WordPress

Pourquoi ne pas intégrer simplement une vidéo dans son site sans passer par Youtube ?

Il fut un temps, pas si éloigné, où une solution courante consistait à héberger ses propres vidéos directement sur son site internet.

Cependant, cette approche présentait plusieurs inconvénients :

• La lenteur : les vidéos sont souvent très volumineuses, surtout en qualité 4K. L’intégration de ces vidéos sur un site entraînait des temps de chargement excessivement longs. Ces vidéos devaient être complètement téléchargées avant de pouvoir être lues. C’est pour cette raison que le streaming est devenu la solution privilégiée : un chargement progressif mis en cache dans le navigateur de l’utilisateur. De plus, les plateformes de streaming compressent les vidéos téléchargées afin de limiter leur poids, facilitant ainsi leur diffusion en ligne.
• L’audience : placer sa vidéo uniquement sur son site et non pas sur une plateforme limitait grandement votre audience. Combien avez-vous de visiteurs chaque mois ? YouTube compte 3 milliards d’utilisateurs dans le monde. En maîtrisant efficacement l’algorithme, vous aurez bien plus de facilité à vous démarquer.
• Le référencement : si vous avez peu d’audience, vous aurez peu d’impact sur votre référencement. Plus votre vidéo sera visionnée, plus elle aura de chances d’être partagée, ce qui bénéficiera à votre référencement naturel.

Favoriser le temps de chargement

N’hésitez pas à recourir à des plugins de gestion de cache tels que WP Rocket et à activer l’option de “Lazy load“. Cette fonctionnalité permet de charger la page sans retarder son affichage. Ainsi, même si votre page est volumineuse, elle se chargera rapidement et les vidéos ne seront chargées qu’une fois que vous atteindrez la section qui les contient.

De plus, WP Rocket propose une option permettant de substituer la vidéo par une image sur les appareils mobiles, évitant ainsi d’alourdir la page pour les utilisateurs sur smartphones ou tablettes.

En combinant ces deux méthodes, vous pouvez réduire le temps de chargement de vos pages contenant des vidéos. Il est cependant recommandé de ne pas surcharger vos pages en intégrant un trop grand nombre de vidéos.

Pour finir sur cette partie, Google PageSpeed Insights afin de vérifier l’efficacité du chargement. Cela vous permettra d’identifier les éléments à optimiser pour améliorer davantage la vitesse de votre site.

Finissons de tourner autour du pot, abordons le sujet qui vous intéresse : comment intégrer des vidéos YouTube dans ses pages ou articles WordPress

Intégrer des vidéos YouTube dans WordPress

Ce tutoriel marchera pour YouTube, mais également pour d’autres vidéos de plateformes en ligne.

Ajouter manuellement ses vidéos

Rendez-vous sur Youtube et cliquez sur le bouton “partager” puis “intégrer”

Dans la fenêtre qui s’ouvre, copiez le code à droite

Le code est le suivant :

<iframe width="560" height="315" src="https://www.youtube.com/embed/HWnsI7vZoAA?si=yNxxWBNKr-1Swug1&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Explications du code :

• frameborder=”0″: Détermine si la vidéo comporte un cadre. Ici, il n’y en a pas (“0”).
• accelerometer & gyroscope : Autorise l’utilisation de l’accéléromètre et du gyroscope. Cela signifie que si vous regardez la vidéo sur votre mobile, vous autorisez à passer en mode portrait/paysage en fonction du sens de votre téléphone ou également lors de vidéos VR/360.
• autoplay : Permet à la vidéo de démarrer automatiquement.
• clipboard-write : Autorise l’écriture dans le presse-papiers. Si une vidéo propose un lien ou un texte interactif dans la vidéo, vous pourrez les copier dans l’appareil.
• encrypted-media : Autorise la lecture de médias chiffrés. Si la vidéo est protégée par le droit d’auteur, vous pourrez la lire dans votre page web.
• picture-in-picture : Cette option permettra de mettre la vidéo en bas à droite de votre écran tout en continuant votre navigation sur le site web.
• web-share : Autorise le partage de la vidéo.

Options supplémentaires possibles :

• controls=0 : supprime les contrôles de la vidéo
• showinfo=0 : cachera le titre de votre vidéo
• loop=1 : joue en boucle la vidéo

Ajouter votre code dans un bloc html :

Ce qui nous donnera ceci :

Utiliser Gutenberg

Gutenberg, le constructeur de blocs intégré à WordPress, est capable de reconnaître automatiquement s’il s’agit d’une vidéo YouTube ou Vimeo, par exemple.

Pour ce faire, copiez simplement le lien de votre vidéo YouTube :

Ajoutez votre block Gutenberg “Youtube” :

Collez votre lien :

Et voilà !

Cependant, l’inconvénient de cette technique est que vous ne pouvez pas personnaliser les paramètres de votre vidéo, tels que la suppression de certaines options, comme nous l’avons fait dans le point précédent.

Rendre le lecteur responsive le lecteur de vos vidéos Youtube dans WordPess

Comme vous pouvez le constater dans cet article, la vidéo que j’ai ajoutée un peu plus haut a une taille fixe. Cette taille est celle de l’iframe, c’est-à-dire 560px * 315 px dans notre cas. Cependant, vous souhaitez peut-être la rendre responsive pour qu’elle s’affiche en plein écran.

Pour ce faire, nous allons modifier le code HTML et ajouter un peu de CSS.

Je vais englober mon iframe dans une division que j’ai appelée “ContainerVideo”.

<div class="containerVideo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/HWnsI7vZoAA?si=5jwURj4CjhuT2rtf&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

/* Conteneur pour la vidéo */
.containerVideo {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Ratio 16:9: 9/16 = 0.5625 (56.25%) */
}

/* Vidéo à l'intérieur du conteneur */
.containerVideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Ainsi, votre conteneur vidéo conserve un ratio de 16:9. La vidéo occupera tout l’espace disponible dans son conteneur tout en s’adaptant à la largeur de l’écran ou de la fenêtre du navigateur.

Vous pourrez, par exemple, l’utiliser comme arrière-plan d’une division.

En conclusion

Intégrer une vidéo YouTube dans WordPress, que ce soit pour vos pages ou vos articles, peut s’avérer essentiel pour votre référencement. Cependant, il est primordial de veiller à leur qualité et à leur pertinence.

Si toutefois vous envisagez d’utiliser ces vidéos comme fond de section, je vous recommande vivement de vous orienter vers Vimeo Pro. Cette solution vous permet de masquer le logo, vous offrant ainsi la possibilité d’obtenir un rendu professionnel avec une vidéo totalement intégrée à votre design.