javascript - Youtube iFrame 嵌入停止视频不是功能

Question

我正在尝试将 YouTube iframe 嵌入到我网站上的自定义灯箱中。嵌入本身工作正常。当我尝试关闭灯箱时，灯箱会关闭，但视频(而不是音频)会在后台继续播放。 stopVideo 函数返回“stopVideo 不是函数”

$("#youTubeLink").click(function(){
     var f = '<iframe id="ytplayer" type="text/html" width="100%" height="400px" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>'
     global.addLightboxContent(f);
     global.showLightbox();
});

当我关闭灯箱时会发生这种情况

$("div#lightbox-close").click(function() {
    $('#ytplayer').stopVideo();
    global.killLightbox();
}

• 全局灯箱功能正在做他们应该做的事情(将 iframe 添加到 LB，显示它然后杀死它)
• 当 div#lightbox-close 被点击时，该函数被触发。使用控制台日志进行测试

我猜我缺少某种 Youtube js 脚本包含。我不确定到底是什么。

Answer 1

// https://developers.google.com/youtube/iframe_api_reference

// global variable for the player
var player;

// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('video', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {

  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });

  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });

}

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

请检查这个例子http://codepen.io/marti1125/pen/XdyPOe