title: Get rid of an embedded YouTube player after video has finished
body: <p>I currently have the below code to play a youtube video on a page.</p>
  
  <pre><code>&lt;div id="player"&gt;&lt;/div&gt;
  &lt;script&gt;
  //Load player api asynchronously.
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'JW5meKfy3fY',
        playerVars: { 'autoplay': 1, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
  }
  function onPlayerReady(event) {
      event.target.playVideo();
  }
  function onPlayerStateChange(event) {
      //When the video has ended
      if (event.data == YT.PlayerState.ENDED) {
          //Get rid of the player
      }
  }
  </code></pre>
  
  <p></p>
  
  <p>The onPlayerStateChange function finds out when the player has finished playing the video.
  How can I then make this player disappear?</p>