Using the 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中，我的猜测是，在分配click处理程序时，带有类 toggle1 的按钮尚未添加到 DOM 中。 将该处理程序赋值包装在 $(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();
  });
}