我重新检查了这个问题，并找出了一些你遇到的问题。
可以在JSFiddle上查看它的工作情况 http://jsfiddle.net/8kN6Z/33/
以下是你做错的事情：
您没有加载Youtube播放器API。即使您使用iframe，也必须手动执行此操作。
您没有创建名为onYouTubePlayerAPIReady的函数。
您没有为框架创建YT.Player对象，并将onReady事件处理程序设置为该YT.Player对象的onPlayerReady函数。
您没有等待在onPlayerReady回调函数内部将单击事件处理程序设置为已准备就绪的YT.Player对象。
您将JSFiddle上的Javascript API设置为Mootools，然后使用CSS选择器语法与$（'#id'）一起使用。$ $（'#id'）与mootools一起使用，但$（'id'）是正确的Mootools语法。 $（'#id'）是jQuery。
您将javascript包装在onLoad方法中。这不起作用。
YouTube Player API设置和函数定义需要在顶层定义。
最大的问题是iframe标记中缺少type =“text / html”和src脚本参数&enablejsapi = 1属性。如果没有这些，所有脚本都不起作用。
在Codepen上，您正在使用jQuery，因此必须转换为该解决方案。
我遇到的问题是Mootools：
$（'video'）.hide（）不起作用。创建一个.hideme类，其中包含display：none，并在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方法。
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);
