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 es to an end the video looks like this:

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?

Here is my script so far:

// download api code
var tag = document.createElement('script');
tag.src = "";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// this function creates an <iframe> 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();
}

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 es to an end the video looks like this:

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?

Here is my script so far:

// download api code
var tag = document.createElement('script');
tag.src = "http://www.youtube./player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// this function creates an <iframe> 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();
}

• javascript
• iframe
• youtube
• youtube-api

1 Answer 1

As of September 25, 2018 the showinfo parameter has been depreciated. https://developers.google./youtube/player_parameters#august-23,-2018

Add 'showinfo' : 0, to the constructor parameters

So:

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
    height: '400',
    width: '800',
    playerVars: {
        'autoplay': 1,
        'controls': 0, 
        'autohide': 1,
        'showinfo' : 0, // <- This part here
        'wmode': 'opaque',
        'rel': 0,
        'loop': 1
    },
    videoId: 'vlRxmgXPcW0',
    events: {
        'onReady': onPlayerReady
    }
});

As far as the play button, I don't believe you are allowed to hide that -- as its part of youtube's api branding terms of service.