YouTube Player API hide play button, icons, & video title in iframe
<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>