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.

2 Answers
2

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 globalonYouTubePlayerAPIReady event to be defined. When the code is wrapped in an onload event, the function isn't global any more.

This works on jsfiddle, but actually taking the code and putting it in a js file and liking the file in the header does not work. Even when I copy your code where you globaly defined onYouTube...
–
halliewuudJul 1 '12 at 18:03

@halliewuud Are you testing on a file: protocol? That won't work, because postMessage (the core method of the YouTube frame API) does not function on file:.
–
Rob WJul 1 '12 at 19:20

From the left pane of jsFiddle, in the section titled "Choose Framework" you need to change the first setting to no wrap (body) so the JS panel is run after the DOM is loaded. You should also change the second option to jQuery 1.7.2 if you wish to use that library.