Fermer

janvier 7, 2021

Implémentation d'un bouton de lecture / pause personnalisé pour les vidéos YouTube intégrées à l'aide de l'API IFrame Player


Récemment, j'ai travaillé sur un bogue où le suivi GTM était interrompu pour une vidéo YouTube intégrée avec un bouton de lecture personnalisé. En cliquant sur le bouton de lecture, la vidéo jouait parfaitement bien, mais elle n'était pas suivie par GTM. Je n'ai rien trouvé de mal dans le code, j'ai donc fait quelques recherches et j'ai trouvé qu'il était recommandé d'utiliser l'API YouTube IFrame player pour tout bouton de lecture / pause personnalisé, que vous effectuiez un suivi GTM sur votre site Web pages ou pas.

L'API du lecteur IFrame vous permet de contrôler le lecteur YouTube à l'aide de JavaScript. En utilisant les fonctions JavaScript de l'API, vous pouvez:

  • Mettre des vidéos en file d'attente pour la lecture
  • Lire, mettre en pause ou couper le son de ces vidéos
  • Ajuster le volume du lecteur
  • Récupérer des informations sur la vidéo en cours de lecture

API YouTube IFrame Player

Pour utiliser l'API, assurez-vous de charger le code de l'API IFrame player de manière asynchrone.

 var tag = document.createElement ('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName ('script') [0];
firstScriptTag.parentNode.insertBefore (tag, firstScriptTag);

Définissez également le paramètre enablejsapi sur 1 dans l'URL src de la balise

onYouTubeIframeAPIReady – L'API appellera cette fonction lorsque la page aura fini de télécharger le JavaScript pour l'API du lecteur, ce qui vous permettra ensuite d'utiliser l'API sur votre page. Fonction

 onYouTubeIframeAPIReady () {
    player = new YT.Player ('iframe-id', {
      videoId: 'video-id',
      événements: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

Covid 19

'iframe-id' – Valeur de l'attribut id de