将内联 Youtube API JavaScript 代码移动到单独的文件

Question

我有这个jsfiddle。

当我将脚本从上面板移动到下面板时，它不再起作用。为什么我不能使用 jQuery 来定位按钮？现在，我必须使用vanilla JavaScript，因为jQuery不起作用。

有什么想法吗？

Answer 1

在 JSFiddle 中，在左侧面板^屏幕截图中，您可以选择放置脚本的位置。默认情况下，它包含在头部的onload事件中。默认情况下，将加载 Mootools 库。

YouTube 播放器 API 无法使用默认设置的原因是，该 API 需要定义全局onYouTubePlayerAPIReady事件。当代码包装在 onload 事件中时，该函数不再是全局函数。

解决方案是正确使用 JSFiddle：使用 no wrap (body) 和 jQuery 1.7.2 ： http://jsfiddle.net/4WPmY/12/。

另一种解决方案虽然不如推荐的解决方案好，但通过将其设置为属性 window 来全局定义onYouTubePlayerAPIReady：http://jsfiddle.net/4WPmY/13/

window.onYouTubePlayerAPIReady = function () {

Answer 2

在jsFiddle的左窗格中，在标题为"选择框架"的部分中，您需要将第一个设置更改为no wrap (body)，以便在加载DOM后运行JS面板。如果希望使用该库，还应将第二个选项更改为jQuery 1.7.2。

你的小提琴，更新：http://jsfiddle.net/Marcel/4WPmY/11/