Youtube Api multiple videos not firing events

Youtube Api multiple videos not firing events

I have a page with 10 buttons linked to Youtube videos using the Youtube api.
When the page loads I don't want any videos to be shown until one of the buttons is clicked. This bit is working well.

I am trying to get the video to play when the button is clicked and remove the video when it ends (this is the bit I'm having trouble with).

The video ids will be variables from a json response. I have hard coded them here just for testing.
This is the code I'm using just to test:

  1. <html>
    <head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://www.youtube.com/iframe_api"></script>
    </head>
    <body>

    <button id="video1">
    Video1
    </button>

    <button id="video2">
    Video2
    </button>

    <button id="video3">
    Video3
    </button>
    <br>

    <script>
     $("#video1").click(function(){
        $("iframe").remove();
        $("body").append('<iframe id="existing-iframe-example" width="200" height="150" src="https://www.youtube.com/embed/KtEIMC58sZo?iframe_api" frameborder="0" enablejsapi="1"></iframe>');

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('existing-iframe-example', {
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
        });
      }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            event.target.destroy();
        }
    }
    }); // close vid1 click function

    $("#video2").click(function(){
        $("iframe").remove();
        $("body").append('<iframe id="existing-iframe-example  width="200" height="150" src="https://www.youtube.com/embed/B-suuEQyoVc?enablejsapi=1"  frameborder="0" enablejsapi="1"></iframe>')
    });

    $("#video3").click(function(){
        $("iframe").remove();
        $("body").append('<iframe id="existing-iframe-example  width="200" height="150" src="https://www.youtube.com/embed/e3ZtOS4MCkk?enablejsapi=1"  frameborder="0" enablejsapi="1"></iframe>')
    });
    </script>

    <script>
      var tag = document.createElement('script');
      tag.id = 'iframe-demo';
      tag.src = 'https://www.youtube.com/iframe_api';
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('existing-iframe-example', {
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
        });
      }
      function onPlayerReady(event) {
        document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
      }
      function changeBorderColor(playerStatus) {
        var color;
        if (playerStatus == -1) {
          color = "#37474F"; // unstarted = gray
        } else if (playerStatus == 0) {
          color = "#FFFF00"; // ended = yellow
        } else if (playerStatus == 1) {
          color = "#33691E"; // playing = green
        } else if (playerStatus == 2) {
          color = "#DD2C00"; // paused = red
        } else if (playerStatus == 3) {
          color = "#AA00FF"; // buffering = purple
        } else if (playerStatus == 5) {
          color = "#FF6DOO"; // video cued = orange
        }
        if (color) {
          document.getElementById('existing-iframe-example').style.borderColor = color;
        }
      }
      function onPlayerStateChange(event) {
        changeBorderColor(event.data);
      }

    </script>

    </body>
    </html>
At the moment, this is just to change the border color of the video to see if the events are firing, but eventually I want to remove the iframe when the video finishes.

So far the videos work and change when I click each button, but the video events aren't firing which is why I'm using:
  1. $("iframe").remove()
Any help would be greatly appreciated .

I have a jsfiddle for it Here