我有一个使用 fullPage js 构建的模板，用于创建滑动部分。该页面支持视频，但当用户将光标放在视频本身上方滚动时，滚动和手势会被禁用。同样，在移动设备上也观察到了这种行为。

为了解决这个问题，我使用一个覆盖 YouTube iframe 的空 div。这解决了滚动行为，但我还缺乏直接控制 YouTube 播放器的能力。我尝试使用 youtube API 和 jquery 来假装能够使用 youtube 播放器顶部的空 div 切换播放/暂停，但它不起作用。

http://codepen.io/lumpeter/pen/XpayeB

youtube 的主要代码是：

 function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("player");
  ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
}

function onPlayerReady(event) {
        $('#video-button').click(function(event){
            ytplayer.playVideo();
        });
    }

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        $('#video-button').click(function(event){
            ytplayer.pauseVideo();
        });
    }
    else {
        $('#video-button').click(function(event){
            ytplayer.playVideo();
        });
    } 
}

有人能告诉我为什么它不起作用吗？我有事件侦听器来查找更改并使用布尔值来检测视频的状态以切换播放/暂停，但由于某种原因，它不像我预期的那样工作。

================更新==================

我还尝试了以下操作：

$(document).on('click', '#pauseVideo', function(){  
player = new YT.Player('myVideo')             
if (event.data == player.PlayerState.PAUSED) {
      $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}','*');
}

if (event.data == player.PlayerState.PLAYING) {
      $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');

    }

});

但是，我收到错误“Uncaught ReferenceError：YT 未定义。”