我重温了这个。弄清楚你遇到的一些问题。
看看它在 JSFiddle 上的工作http://jsfiddle.net/8kN6Z/33/
这是你做错了什么：
您没有加载 Youtube Player API。即使您使用的是 iframe，也必须手动执行。
您没有创建名为 onYouTubePlayerAPIReady 的函数。
您没有为您的框架创建 YT.Player 对象并将该 YT.Player 对象的 onReady 事件处理程序设置为您的 onPlayerReady 函数。
您没有等到在 onPlayerReady 回调函数中将点击事件处理程序设置为就绪的 YT.Player 对象。
您将 JSFiddle 上的 Javascript API 设置为 Mootools，然后使用带有 $('#id') 的 CSS 选择器语法。$$('#id') 适用于 mootools，但 $('id') 是正确的 Mootools 语法。$('#id') 是 jQuery。
您将 javascript 包装在 onLoad 方法中。这是行不通的。
YouTube Player API 设置和函数定义需要在顶层定义。
最大的问题是 iframe 标签中缺少 type="text/html" 和 src 脚本参数 &enablejsapi=1 属性。没有这些，脚本将无法正常工作。
在 Codepen 上，您使用的是 jQuery，因此必须对这个解决方案进行音译。
我在使用 Mootools 时遇到的问题：$('video').hide() 不起作用。创建一个带有 display:none 的 .hideme 类并在 onPlayerReady 回调函数的末尾调用 $('video').addClass('hideme') 就可以了。
JS Fiddle 工作示例
HTML：
<body>
<div id="escolta">escolta</div>
<div id="pausa">pausa</div>
<iframe id="video" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/4G1mundpq-Q?rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</body>
CSS：
#escolta, #pausa {
font-family: Tahoma;
letter-spacing:1px;
font-size:11px;
color: #666;
width: 80px;
text-align: center;
height: 20px;
line-height: 20px;
background-color: #ccc;
cursor: pointer;
}
#escolta {
position:absolute;
top: 20px;
left:20px;
}
#pausa {
position: absolute;
top:20px;
left: 150px;
}
#pausa {
position: absolute;
top:20px;
left: 150px;
}
#video {
position:absolute;
top:100px;
left:20px;
}
.hideme {
display:none;
}
JS：
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
$("escolta").addEvent('click', function () {
event.target.playVideo();
});
$("pausa").addEvent('click', function () {
event.target.stopVideo();
});
$('video').addClass('hideme');
}
jQuery 的更新信息如下：
我保存了一个新的测试工作 jQuery jsfiddle http://jsfiddle.net/8kN6Z/47/
唯一的变化是在 javascript 部分中通过 id 选择按钮的两行。其余的 javascript 使用内置 DOM 方法的 javascript。
jQuery JS：
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event){
event.target.playVideo();
$("#escolta").on('click', function() {
player.playVideo();
});
$("#pausa").on('click', function() {
player.stopVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);