youtube api - onStateChange does not fire the second time -
there seems lot of discussion around onstatechange event not firing cannot seem find answer specific problem. in case, can connect fine api , load video. api ready event fires, followed onplayerready , onstatechange. when closer viewer (iframe in video embedded) , open again, api ready event fires, followed onplayerready onstatechange not fire when video starts playing...
i have refresh browser , load script again same or different video work in case not acceptable solution.
i have tried manually adding listener unfortunately have opposite issue that, multiple events fired there no way remove listener on closing viewer.
i should add behaviour same in chrome , firefox (latest versions)
your in matter appreciated.
thanks,
okay dug code little bit more , minimized exact problem. it's issue iframe set url call. jeff, modified example on jsfiddle (http://jsfiddle.net/jeffposnick/yhwsg/3/) 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"); } // api call function when 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 ignore "hide player" button , click on "show player" once video loads , see statechange events not fire once player loaded second time.
i setting source of iframe on onready event fired both times onstatechange not. hope helps suggest fix.