YouTube iframe player API - OnStateChange not firing

Question

I have literally just copy & pasted the code from the YouTube developer page YouTube Player API Reference for iframe Embeds (from underneath the heading "Getting Started"). The only difference, is that I added an alert to fire when the state changed, because I thought I was doing something wrong within the onPlayerStateChange function.

You can see the jsFiddle at http://jsfiddle.net/jesMv/.

As stated, it's just an exact copy of the code from the YouTube developer page with the added

alert('State Changed')

as the first thing to fire in the onPlayerStateChange function.

Nothing is happening, however... No matter how I look at this and what I change, I simply can't get the onStateChange to do anything.

How can I fix this problem?

score 25 · Accepted Answer · edited May 23 '17 at 12:09

25

There was a temporary issue with the iFrame Player API (which was fixed in June 2013) that you can read about here: https://code.google.com/p/gdata-issues/issues/detail?id=4706

Jeff Posnick posted a temporary workaround here: http://jsfiddle.net/jeffposnick/yhWsG/3/

As a temporary fix, you just need to add the event listener within the onReady event:

function onReady() {
    player.addEventListener('onStateChange', function(e) {
        console.log('State is:', e.data);
    });
}

Make sure to remove the onStateChange event from the YT.PLAYER constructor (see the jsfiddle).

Also, as someone mentioned on the Google Code Issue Thread, you set an interval and poll the player for its current state instead of listening for the onStateChange event. Here is an example code snippet for doing that:

setInterval( function() {
  var state = player.getPlayerState();
  if ( playerState !== state ) {
    onPlayerStateChange( {
      data: state
    });
  }
}, 10);

Firefox and IE Issues

Other people have mentioned that Firefox will not instantiate the YouTube Player if it is placed in a container with the css property display: none. Internet Explorer will also not work with visibility: hidden. If you're finding this to be the issue, try positioning the container off the page with something like left: -150%.

Steve Meisner talks about this here: YouTube API does not appear to load in Firefox, IFrame gets loaded , but the onPlayerReady event never fires?

And another related SO question: YouTube iframe API - onReady and onStateChanged events not firing in IE9

Edit: I've edited this answer to be more thorough because people are still seeing this error after the original bug was fixed in 2013.

edited May 23 '17 at 12:09

Community

1
1

answered Jun 13 '13 at 02:11

Matt Koskela

5,269
3
26
29

2

The issue seems now that I write not to be fixed (PT time 00.44) yet. – loretoparisi Jun 13 '13 at 07:45
May not be working if you're using an iframe rather than a div that gets replaced once the api loads – slashwhatever Jul 25 '13 at 15:20
1

In my case, this was not the solution (and this bug should be resolved by now?). I had `display:none` on the container of the video and the API didn't fire. More here: http://stackoverflow.com/a/22199021/406171 – Steve Meisner Mar 05 '14 at 13:42
In 2014, I've seen this break and mysteriously start working again about 30 minutes later. The fix given in this answer didn't work for me while it was broken. – mhenry1384 Nov 24 '14 at 20:58
I've also seen this issue following the bug fix mentioned. For me it occurs when adding the player DOM node via JS after a user interaction. Unfortunately, it happens only about 10% of the time so it's difficult to troubleshoot. – evanmcd Apr 15 '15 at 15:26
@evanmcd interesting, let me know if you end up figuring it out and we can add it to the answer. People are definitely still seeing this issue so I want the answer to be as thorough as possible. Thanks! – Matt Koskela Apr 15 '15 at 18:29
1

Thanks! I needed the polling workaround to get this working... Two updates to the polling function (for completeness' sake): - Add `var playerState` as a first line, to initialize the variable - Add the line `playerState = state`, to keep track of the new state once the event has fired. – Daan Wilmer Jun 29 '15 at 09:16
When I used the `` instead of the `<div id="player">` the `onStateChange` only fired sometimes and not others, as if there were an order of operations issue. It worked every time when I just used the `<div id="player">`.</div></div> – Kevin Beal Oct 07 '15 at 22:31
This issues still occurs for me as of this writing. The polling solution above using setInterval works though. – Placeable Mar 29 '16 at 13:18
it doesn't help me with iframe – Georgiy Chebotarev Jun 17 '19 at 12:10

score 1 · Answer 2 · answered Aug 08 '19 at 15:06

onStateChange does not work in any version of Internet Explorer or Edge. I assume it will begin working once Microsoft moves Edge over to being Chromium-based. But whether IE9, 11, or Edge, I cannot get this event to fire, even when it fires cleanly in Chrome, identical code.

score 0 · Answer 3 · answered Apr 11 '23 at 18:45

This might help someone (likely future me) stumbling across this.

I guess they assume you're going to use the API to create the <iframe> element that you want to control, but this doesn't work well if you are, for example, using a modern frontend framework like React to have multiple switchable iframes.

If you're trying to hook up the API and happen to be starting with an <iframe> created elsewhere, make sure the src includes the param enablejsapi=1.

~~or the iframe has an enablejsapi="true" attribute~~ (doesn't work, good docs, Google).

This is buried in the docs and took me longer to figure out than it shoudl've.

YouTube iframe player API - OnStateChange not firing

3 Answers3

Linked

Related