我再谈这个。想通了一些您遇到的问题。
看看它的jsfiddle http://jsfiddle.net/8kN6Z/33/
在这里工作是你做了什么错：
你没有加载YouTube播放器API。即使您使用iframe，也必须手动执行此操作。
你没有创建一个名为onYouTubePlayerAPIReady功能。
你没有为您创造一个框架对象YT.Player和该YT.Player对象onReady事件处理程序设置为您onPlayerReady功能。
你没等到onPlayerReady回调函数来设置点击事件处理程序的准备YT.Player对象内。
你的jsfiddle设置的JavaScript API来Mootools的，然后使用CSS选择器语法用$（ '＃ID'）。 $$（'＃id'）与mootools一起使用，但$（'id'）是正确的Mootools语法。 $（'＃id'）是jQuery。
你包裹在onload方法的JavaScript。哪个不行。
YouTube播放器API设置和功能定义，需要在顶层进行定义。
最大的问题是iframe标记中缺少type =“text/html”和src脚本参数& enablejsapi = 1属性。如果没有这些脚本的作品。
在Codepen你正在使用jQuery因此该方案将不得不进行音译。
问题我用MooTools的遭遇： $（ '视频'）隐藏（）不工作。使用display：none创建一个.hideme类，并在onPlayerReady回调函数结束时调用$（'video'）。addClass（'hideme'）。
JS Fiddle working example
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/
唯一的变化是在按钮被按id在JavaScript部分所选的两行。 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);
你如何简单得多可以获得比点击视频？ – Blazemonger 2012-07-18 13:29:55
@Blazemonger但这不会使用API作为问题:) – JustAnotherDeveloper 2012-07-18 13:31:42
1-我想隐藏视频，只听到声音。 2 - 我想自定义按钮以适合页面的设计。我在这里展示的只是简化以帮助解释这个问题 – Nrc 2012-07-18 13:32:46