title: YouTube Player API hide play button, icons, & video title in iframe
body: <p>I am using the YouTube video player API to embed a YouTube video in an iframe. I want to hide the play button, video title, and icons in the top right corner. This is working initially with the script I wrote below. However, once the video comes to an end the video looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/dLvAR.png" rel="nofollow"><img src="https://i.stack.imgur.com/dLvAR.png" alt="Screenshot of YouTube player API error"></a></p>
  
  <p>None of the icons or the title are clickable either. Why do these appear once the video ends? How can I edit my script to hide the video title, play button, and the icons in the top right corner when the video ends?</p>
  
  <p>Here is my script so far:</p>
  
  <pre><code>// download api code
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  // this function creates an &lt;iframe&gt; and youtube player after the api code downloads
  var player;
  
  function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
      height: '400',
      width: '800',
      playerVars: {
          'autoplay': 1,
          'controls': 0,
          'autohide': 1,
          'wmode': 'opaque',
          'rel': 0,
          'loop': 1
      },
      videoId: 'vlRxmgXPcW0',
      events: {
          'onReady': onPlayerReady
      }
  });
  }
  
  // the api will call this function when the video player is ready
  function onPlayerReady(event) {
  event.target.mute();
  }
  </code></pre>