これを見直しました。あなたが抱えていた問題のいくつかを考え出しました。
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 です。
onLoad メソッドで JavaScript をラップしました。これは機能しません。
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 によってボタンが選択される 2 行です。残りの JavaScript は、DOM メソッドに組み込まれた JavaScript を使用しています。
JQueryJS:
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);