Ajouter des videos YouTube dans wordPress via API iframe

Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.

Afin d’ajouter des vidéos youTube et pouvoir les contrôler avec javaScript, on utilise l’API iframe de youTube. Ceci permet, par exemple, si l’on insère plusieurs vidéos dans un article, de stopper la vidéo qui est en train d’être jouée si on en lance une autre.

 

L’injection asynchrone de l’API Iframe Youtube ne fonctionnant pas dans wordPress, après avoir essayé par différentes méthodes, on va déclarer cela dans fonctions.php du thème:

fonctions.php:

On insère le script de l’API, et le script xbsYoutube.js. On contrôlera les iframes via l’API et on en profitera pour les rendre responsive.

xbsYoutube.js:

On insère dans styles.css:

styles.css:

Il ne reste plus qu’à écrire le shortcode pour insérer l’iframe dans un article:

fonctions.php:

On insérera alors une vidéo youTube dans un article en appelant le shortcode de la façon suivante, l’id étant l’identifiant de la vidéo sur youTube:

Et hop, on peut insérer plusieurs vidéos youTube en responsive design, qui se mettent en pause lorsqu’une nouvelle est jouée.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *