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

Question

我正在尝试将 YouTube iframe 嵌入到我网站上的自定义灯箱中。嵌入本身工作正常。当我尝试关闭灯箱时，灯箱会关闭，但视频（而不是音频）会在后台继续播放。 stopVideo 函数 returns "stopVideo is not a function"

$("#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

Answer 2

是的，所以您确实需要使用 YouTube 提供的 javascript API 加载 iframe 嵌入。但是，这可能不适用于您的灯箱，因为它似乎需要一个 html 字符串作为其内容。

或者，您可以随时删除您的 YouTube iframe 关闭 - 这肯定会停止 video/audio。我怀疑将您的灯箱内容设置为空字符串 ("") 甚至空 div 或 iframe 应该可以解决问题...

希望对您有所帮助！

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

Youtube iFrame embed stopVideo not a function

javascript

youtube

iframe

jquery

youtube-iframe-api