Question

184

YouTube iframe player API - OnStateChange not firing

rated 0 times [ 188] [ 4] / answers: 1 / hits: 32180 / 11 Years ago, thu, june 13, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianod

Add To Favorites

Follow

Total Points: 667

Total Questions: 106

Total Answers: 92

Location: Jordan

Member since Thu, Aug 5, 2021

3 Years ago

lucianod questions

1 Angular Material MatToolTip show up only when the element is truncated

Tue, Feb 9, 21, 00:00, 3 Years ago

1 How to catch server errors in Nuxt.js so it doesn't crash page render? (Vue)

Wed, Feb 3, 21, 00:00, 3 Years ago

1 How to use window.postmessage to communicate with parent window

Thu, Aug 6, 20, 00:00, 4 Years ago

1 ESM import on webpackConfig

Sat, Jul 25, 20, 00:00, 4 Years ago

1 Snackbar Vuetify - override method after timeout

Tue, Oct 30, 18, 00:00, 6 Years ago

View All

answered 11 Years ago meliashelbief · Accepted Answer

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.