Запуск события при запуске нового видео при воспроизведении плейлиста YouTube

Question

У меня есть плейлист YouTube; все отлично работает с этим. Вот код:

<div id="player"></div> 
<script> 
    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 done = false; 
    var player; 
    function onYouTubePlayerAPIReady() { 
     player = new YT.Player('player', { 
      width: '100%', 
      height: window.innerHeight-120+'px', 
      vq: 'hd720', 
      videoId: 'ZnToyoZus74', 
      playerVars: { 
       'autoplay': 1, 
       'loop': 1, 
       'showinfo': 0, 
       'controls': 0, 
       'playlist': [ 
        'Glr36uh7Uls,Mx-cOLPqieg,C9uA-LFJS3Q,mKB4j3Lqa3w,tLmLXEShHT8' 
       ] 
      } 
     }); 
    } 
</script> 

Однако, я хочу показать настроенную информацию о воспроизводимом в данный момент видео чуть ниже (в обособленные <div>, но не накладывая видео). Как только видео начнется, появится <div>, содержащий информацию из первого видео, после того, как видео закончится, этот div исчезнет. Как только начнется воспроизведение второго видео, будет отображаться другой <div>, содержащий информацию для второго видео.

Элементы <div> будут содержать файл HTML, используя id видео в виде имени файла: ZnToyoZus74.html.

В этом примере я использую следующие идентификаторы:

• ZnToyoZus74
• Glr36uh7Uls
• Mx-cOLPqieg
• C9uA-LFJS3Q
• mKB4j3Lqa3w
• tLmLXEShHT8

Answer 1

РЕШЕННЫЙ!

Это окончательный код, только в случае, если кто-то ищет тот же ответ:

<div id="player" style="float:right;"></div> 
<script> 
    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 done = false; 
    var player; 
    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
    width: '100%', 
    height: window.innerHeight-110+'px', 
    vq: 'hd720', 
    videoId: 'K7XbJ0XLXPY', 
    playerVars: { 'autoplay': 1, 'loop': 1, 'showinfo': 0, 'controls': 0, 'playlist':['UiUZOo1b6m0,w0Sm9tRJDDA']}, 
    events: { 
    'onReady': onPlayerReady, 
    'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 
    function onPlayerReady(evt) { 
     evt.target.playVideo(); 
    } 
    function onPlayerStateChange(evt) { 
     if (evt.data == YT.PlayerState.PLAYING) { 
      var url = evt.target.getVideoUrl(); 
      var match = url.match(/[?&]v=([^&]+)/); 
      var videoId = match[1]; 

      document.getElementById("myiframe").src='videosinfo/'+videoId+'.html'; 
     } 
    } 
</script> 
<iframe name="myiframe" id="myiframe" width="100%" height="200px" allowtransparency=true frameborder="0" ></iframe>