Get rid of an embedded YouTube player after video has finished

youtube, youtube-javascript-api

Solution

If you are using IFRAME API :

function onPlayerStateChange(event) {
    //When the video has ended
    if (event.data == YT.PlayerState.ENDED) {
        //Get rid of the player
        event.target.destroy();
    }
}

Problem

I currently have the below code to play a youtube video on a page. ``` <div id="player"></div> <script> //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 } } ``` The onPlayerStateChange function finds out when the player has finished playing the video. How can I then make this player disappear?

Original source