Hide youtube video after playing

1
votes

I have a webpage, and I made a video for it. With HTML5 formats (webm,ogg,mp4) works only the Chrome correctly. When the video is finishing, I can hide the video with JavaScript. I thought I can make with youtube player, (autoplay, hide controls etc) but i can't hide it, when it is finished. I found the "onStateChange function but I can't use it. Any ideas?

<iframe width="840" height="630" src="URLrel=0&showinfo=0;&autoplay=1;controls=0" frameborder="0" allowfullscreen></iframe>
2
javascriptjqueryhtmlvideoyoutube

2 Answers

0
votes

You need to use the YouTube Iframe Player API to check (1) that the video has ended (YT.PlayerState.ENDED) when onPlayerStateChange is invoked, and (2) remove/hide the DOM element that contains the video, i.e. the iframe.

function onPlayerStateChange(event) {
    // check if video ended and remove player
    if (event.data == YT.PlayerState.ENDED) {
      console.log($('#player').remove());
      done = true;
    }
  }

You have a fully working solution in here: http://jsfiddle.net/jibietr/ua57A/1/

0
votes

A quick and dirty solution would be to use innerHTML to overwrite the iframe when the user closes the video with an onclick event. If the iframe is wrapped inside a with id = "iframeDiv", you can call the following function onclick of the close video button:

function hideIframe() {
    document.getElementById("iframeDiv").innerHTML = '';
}

The iframe would reappear when the user opens the video:

function showIframe() {
    document.getElementById("iframeDiv").innerHTML = '<iframe width="840" height="630" src="URLrel=0&showinfo=0;&autoplay=1;controls=0" frameborder="0" allowfullscreen></iframe>';
}