使用Youtube Iframe API

Question

我试图用Youtube播放器API来切换视频，当我关闭一个模式框。

这里是我的代码，它创建了iframe，但是按钮没有对上述iframe进行API控制。

<div id="player"></div>  

<script type="text/javascript"> 
var tag = document.createElement('script'); 
tag.src = "http://www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 
function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '500', 
     width: '800', 
     videoId: 'f37MOGHMrlI' 
     }); 
} 

$(".toggle1").click(function(){ 
    alert("Pausing " + player);//is undefined :(
    player.pauseVideo(); 
}); 

</script> 

任何人都知道缺失的是什么？

Answer 1

虽然有必要明确地看到整个页面结构，因为您的脚本位于body，我的猜测是，类toggle1的按钮尚未添加到DOM您的click处理程序已分配。或者将处理器分配包装在$(document).ready或

function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '500', 
     width: '800', 
     videoId: 'f37MOGHMrlI' 
     events: { 
      onReady: configureButton 
     } 
     }); 
} 

function configureButton() { 
    $(".toggle1").click(function(){ 
    player.pauseVideo(); 
    }); 
}