我再談這個。想通了一些您遇到的問題。
看看它的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