Insérer une vidéo dans un article WordPress

Compte-tenu du poids de ce type de fichiers, il convient d’utiliser une plateforme de type YouTube, Vimeo, Dailymotion, et d’y importer les vidéos pour les diffuser ensuite sur le site.

Une fois la vidéo enregistrée sur le service d’hébergement, il faut récupérer le code d’intégration après avoir défini une taille personnalisée et ajouter ce code à l’emplacement souhaité dans l’article.

L’intérêt d’utiliser un service d’hébergement externe est que votre vidéo sera diffusée en streaming, c’est à dire directement depuis le site YouTube ou autre, sans utiliser votre propre bande passante : fluidité de chargement et de lecture sont ainsi assurés.
Si vous intégrez votre vidéo comme vous le faites pour une image, votre visiteur risque fort de s’impatienter : en effet, la vidéo devra se charger intégralement avant de commencer à être visualisée.

Procédure CLASSIQUE avec YOUTUBE ET WORDPRESS

Préambule : Un module DIVI Vidéo existe, je vous invite à le découvrir en suivant ce lien. Cependant, la procédure décrite ici vous permettra de modifier les paramètres de la vidéo à votre guise (bordure, lecture automatique, etc…).

  • Cliquez sur le bouton « Partager » pour déplier les options de partage
  • Cliquez sur le bouton « Intégrer »

L’écran suivant affiche le code à intégrer :

  • Copier ce code. Pour notre exemple (la vidéo du groupe Emergence adhérent du site Talents en Partages), cela donne :
    <iframe src="https://www.youtube.com/embed/_m7U30LfE30" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0"></iframe>
  • Insérez un module DIVI Code et collez le code d’intégration précédemment copié.

Procédure RESPECTANT LE RGPD :

Avec DIVI et le script Tarte au Citron préalablement installé et configuré sur votre site

A découvrir sur : https://tarteaucitron.io/fr/

La vidéo doit également être appelée dans un Module DIVI Code.
Pour respecter le RGPD en matière de gestion des cookies, le code à intégrer pour diffuser une vidéo dans YouTube est le suivant (123456789 étant l’identifiant qui figure dans l’adresse de la vidéo sur YouTube).

Pour YOUTUBE :

<div class="youtube_player" videoID="123456789" width="width" height="height" theme="theme (dark | light)" rel="rel (1 | 0)" controls="controls (1 | 0)" showinfo="showinfo (1 | 0)" autoplay="autoplay (0 | 1)"></div>

Exemple :

<div class="youtube_player" videoID="123456789" width="795" height="447" theme="theme(dark)" rel="rel(0)" controls="controls(0)" showinfo="showinfo(0)" autoplay="autoplay(0)"></div>

Pour VIMEO :

<div class="vimeo_player" videoID="123456789" width="width" height="height"></div>

Pour DAILYMOTION 

<div class="dailymotion_player" videoID="123456789" width="width" height="height" showinfo="showinfo (1 | 0)" autoplay="autoplay (0 | 1)"></div>

Comment trouver l’ID de la vidéo à diffuser ?

L’ID de la vidéo se trouve dans la barre d’adresse de la page web qui affiche la vidéo (voir l’image ci-dessous).

Attention : Veillez bien à copier l’ensemble de l’identifiant et à le copier sans espace.
Ici, notre videoID est _m7U30LfE30, de code sera donc videoID=”_m7U30LfE30“.

On peut également retrouver cet identifiant dans le code de partage fourni par YouTube :

Un point sur les tailles à renseigner

Le ration des vidéos peut varier.
Pour respecter les proportions de la vidéo à diffuser, il faut faire une règle de 3.
Par exemple, notre vidéo d’origine fait 560 pixels par 315 (voir l’image ci-dessous).
Je souhaite que la vidéo dans mon site ait une largeur de 795 pixels.
Quelle doit être la hauteur de ma vidéo ?
560 px par 315 px
795 px par ?
Je calcule :
(795 x 315) / 560 = 447,18 pixels que j’arrondis à 447 pixels.

Résultat pour mon exemple :

<div class="youtube_player" videoID="_m7U30LfE30" width="795" height="447" theme="theme(dark)" rel="rel(0)" controls="controls(0)" showinfo="showinfo(0)" autoplay="autoplay(0)"></div>

Pin It on Pinterest