Question

I have this jsfiddle.

When I move the script from the upper panel to the lower panel, it does not work any more.
And why can’t I use jQuery to target the buttons? Now, I have to use vanilla JavaScript, because jQuery does not work.

Any ideas?

Answer 1

In JSFiddle, at the left panel ^screenshot, you can choose where to place the script. By default, it’s wrapped in an onload event within the head. By default, the Mootools library is loaded.

The reason that the YouTube Player API does not work with the default settings is that the API expects a global onYouTubePlayerAPIReady event to be defined. When the code is wrapped in an onload event, the function isn’t global any more.

The solution is to properly use JSFiddle: Use no wrap (body) and jQuery 1.7.2: http://jsfiddle.net/4WPmY/12/.

Another solution, though less nice than the recommended one, is to globally define onYouTubePlayerAPIReady by setting it as a property of window: http://jsfiddle.net/4WPmY/13/

window.onYouTubePlayerAPIReady = function () {