Youtube Embed Iframe - Events Not Firing In Local

Question

I\'ve just noticed that the Youtube events (onReady, onStateChange) are no longer firing when I am testing in my local, but works when I upload the code to JsFiddle. I\'ve d

Answer 1

It appears that the Youtube iframe API is currently broken, though I've seen no official confirmation yet.

See also:

onReady callback not firing when having the iframe explicitly written inside a template

YouTube API onPlayerReady not firing

Edit: Here is the fix: https://code.google.com/p/gdata-issues/issues/detail?id=5670#c6

Here is a direct quote of the answer at the link above:

A quick fix is to add in the origin=http://www.example.com (replace with your servers full domain; make sure you use http:// or https:// as appropriate for your site) to the src= attribute of the player's iframe element. Please make sure that the origin= attribute's value exactly matches the host domain and URL scheme. E.g.

<iframe
  type="text/html"
  width="640"
  height="480"
  src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com"
  frameborder="0">
</iframe>

I'm currently working with the engineering team to figure out whether origin= is going to be required moving forward or whether this new requirement can be reverted, but this is the immediate fix. Apologies for the breakage and lack of advanced communication in the meantime.

If you use the YT.Player() constructor to create the iframe element for you then this isn't be an issue—it's a bit of an edge case for developers who are explicitly including the iframe element as part of their page's HTML.

I implemented the fix above, and it worked for me.

Answer 2

I had put in a fix that implemented the "origin=" param, fixing the original bug and firing state change events.

Now having that origin param is causing the bug. Removed the param, and it works again.