onStateChange does not fire the second time - youtube-api

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,

Answer 1

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&enablejsapi=1&modestbranding=1&rel=0&showinfo=0&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&enablejsapi=1&modestbranding=1&rel=0&showinfo=0&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.

Answer 2

That's not how you load a new video into an existing player. You should be calling player.loadVideoById('VIDEOID') instead of trying to change the src attribute of the existing iframe.
And as mentioned, please don't hide the player by setting display: none. You can move the player offscreen (negative x/y position) if needed.