Triggering an event when a new video starts while playing a YouTube playlist

Question

I have a YouTube playlist; everything is working fine with that. Here's the code:

<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>

However, I want to show customized information related to the currently playing video just below it (in a separated <div> but not overlaying the video). Once the video starts, a <div> containing the info from the first video will be displayed, once the video is over, this div will disappear. As soon as the second video start to play, then a different <div> containing the info for the second video will be displayed.

The <div> elements would contain an HTML file using the id of the video as the file name: ZnToyoZus74.html.

In this example I am using the following ids:

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

Answer 1

SOLVED!

This is the final code, just in case someone is looking for the same answer:

<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>