Découverte Youtube iframe API

30 octobre 2017

Intro

La méthode classique pour ajouter une vidéo Youtube dans une page web est l’Iframe via le bouton partager .

Cette méthode a l’avantage d’être facile et rapide à mettre en oeuvre : un bon copier / coller

Intégrer une vidéo Youtube l’API Javascript

Par contre, si l’on souhaite réaliser des personnalisations dans le comportement et / ou la mise en forme du player, il existe des possibilités de personnalisation en ajoutant des GET dans l’url de l’iframe comme autoplay pour jouer une vidéo dès que celle ci est chargée ou loop pour lire en boucle la vidéo

Il peut arriver que l’on souhaite réaliser des customisations avancées comme par exemple mettre une vidéo dans une diapositive d’un slider et bloquer le déroulement du slider tant que la vidéo n’est pas finie : harisprivatetours.com. Dans ce cas, il faut se pencher sur l’API Youtube

Script de base

Dans la documentation officielle, le premier exemple donne la syntaxe pour mettre en place un player vidéo via l’API. Voici ma version du script de base :

Fichier youtube.js

var tag = document.createElement('script');

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

var ik_player;

//this function is called by the API
// il faut respecter ce nom pour la fonction
function onYouTubeIframeAPIReady() {

  //creates the player object
  ik_player = new YT.Player('player', {
  	  height: '440',
      width: '555',
      videoId: 'ID video',
      playerVars :{
      	rel:0, // pas de liens vidéo similaire à la fin
      	controls:0, // enlever les boutons de controle du player Play, Stop, volume sonore ...
      },
      events: {
        'onReady': onPlayerReady, // à exécuter lors du lancement de la video
        'onStateChange': onPlayerStateChange // à exécuter lors des changements de status
      }
    });
}

function onPlayerReady(event) {
	// Play
	ik_player.playVideo();
}

function onPlayerStateChange(event) {
	// ecouter les événements réalisées sur le player
	if(event.data == YT.PlayerState.ENDED){
	}
}

webdevpro.net