onStateChange does not fire the second time

Question

There seems to be a lot of discussion around onStateChange event not firing but I cannot seem to find the answer my specific problem. In my case, I can connect fine with the API and load the video. The API ready event fires, followed by onPlayerReady and then onStateChange. When I closer the viewer (iFrame in which the video is embedded) and open it up again, the API ready event fires, followed by the onPlayerReady however the onStateChange does not fire when the video starts playing...

I have to refresh the browser and load the script again for the same or a different video to work which obviously in my case is not an acceptable solution.

I have also tried manually adding the listener but unfortunately I have the opposite issue with that, as multiple events are then fired as there is no way to remove that listener on closing the viewer.

I should also add that the behaviour is the same in Chrome and Firefox (latest versions)

Your help in this matter will be really appreciated.

Thanks,

It's not clear what you mean by "close the viewer". Are you setting display: none? An actual live example that we could try out that demonstrates your problem would be appreciated. — Jeff Posnick
It is a custom viewer that essentially embeds the specified video. Just an iFrame in a DIV tag. Essentially, the DIV is set to "display: none". My code is all integrated in the web application and the entire functionality is difficult to extract. — user2694731
possible duplicate of youtube iFrame API on Internet Explorer and Firefox — Jeff Posnick
I removed the block statements. Just setting the newURL source also exhibits the same behaviour. — user2694731

user2694731 user2694731 · Accepted Answer · 2013-09-03T04:49:59

Okay so I dug into the code a little bit more and minimized it to the exact problem. It's an issue with the iFrame set url call. Jeff, I modified your example on JSfiddle (http://jsfiddle.net/jeffposnick/yhWsG/3/) as follows:

HTML Code:

    <div id="DIVTAG">
        <iframe class="gwt-Frame" id="player" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?wmode=transparent&amp;enablejsapi=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;fs=0;autoplay=1"></iframe>

    </div>

<button onclick="hide()">Hide Player</button>
<button onclick="show()">Show Player</button>

JavaScript Code:

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        events: {
            'onReady': onReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onReady() {
   alert("player ready");
}

// The API will call this function when the video player state changes.
function onPlayerStateChange(event) {
    alert("player state changed");
}

function hide() {
   player.stopVideo();
   document.getElementById("player").style.display="none";
}

function show() {
  document.getElementById("player").style.display="block";       
document.getElementById("player").src="https://www.youtube.com/embed/M7lc1UVf-VE?wmode=transparent&amp;enablejsapi=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;fs=0;autoplay=1"; 

}

You can choose to ignore the "hide player" button and just click on "show player" once the video loads and you will see that the stateChange events will not fire once the player is loaded the second time.

I am simply setting the source of the iframe on which the onReady event is fired both times but the onStateChange is not. Hope this helps to suggest a fix.

onStateChange does not fire the second time

2 Answers