Youtube Player API iframe Embed | player.clearVideo() not working

1
votes

I checked the Youtube API v3 iframe embed docs and am trying to apply player.clearVideo() function to my button as follows (ellipsis replaces code) :

...

function onPlayerReady(event) {
 var zapButton = document.getElementById('zapvideo');
  zapButton.addEventListener("click", function() {
  player.clearVideo(); // NOT WORKING
 });
}
...

$(function(){
$('#zapvideo').on('click', function(){ ... });
});

Nothing happens (no errors). player.stopVideo() and other controls work. How can I clear the video from the Youtube player? I'm using Youtube's HTML5 player, but even when Youtube switches to Flash player for some videos, I still cannot clear the video that's in the player (what's worst is that Youtube doesn't revert to the HTML5 player when an HTML5 compatible video is subsequently selected and played in my app regardless if I have opt-in HTML5 or added the relevant html5 playerVars, which means I cannot tab out of Flash-based player controls when they're in focus. So much for "key-bored" navigation!). I'm using Firefox 36.0.1 .

Any suitable workaround function to clear video while keeping the player available will be fine with me.

1
javascriptjqueryyoutube-api

1 Answers

1
votes

Found a workaround with the following code:

...
function onPlayerReady(event) {
...

$('#zapvideo').on('click', function(){
$('#player').hide();
event.target.loadVideoById('',0);
event.target.seekTo(0); // iOS
event.target.stopVideo();
return false;
});

}

#zapvideo button hides the iframe player since we don't want to see any error message in player after an empty or dummy video id is submitted via event.target.loadVideoById(). Remember to show player before playing a new video. The relevant code is encapsulated within the onPlayerReady() function to make sure the player is always ready prior to code execution.