START / STOP YouTube的iframe的模式时，显示/通过API和jQuery事件隐

这是一个有点重新发布的，但没有公认的答案的使用API中使用jQuery的事件相结合，如果这样做，那么答案是不完整的。过去回答： Twitter的引导模态停止的Youtube视频

我不知道如何让一个YouTube的iframe自动开始播放，当引导模式是通过链接打开。当模态驳回了视频停止播放。我看了很多的答案，但没有显示我下一个要完成的答案。那么，你如何使用JQuery事件从引导（ show.bs.modal / hide.bs.modal ）启动/停止录像？如果我按在视频播放时的页面（模式）首次加载，然后关闭该模式并重新打开它下面的代码在Firefox。这并不在Safari或Chrome工作。

我看了看文档，但不容仍然得到它的工作： https://developers.google.com/youtube/iframe_api_reference

这里是我的代码！ HTML：

<div class="modal fade" id="video_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/zg8KE6bEP50?version=3&rel=0&enablejsapi=1&origin=*&html5=1" frameborder="0" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div><!--/modal fade-->

使用Javascript：

jQuery( document ).ready(function() {
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});

var player;

window.onYouTubePlayerAPIReady = function() {
player = new YT.Player('player', {
  events: {
    'onReady': onPlayerReady
  }
});
}
function onPlayerReady(event) {
$("video_modal").on('shown.bs.modal', function() {
    player.playVideo();
});
$("video_modal").on('hidden.bs.modal', function() {
    player.stopVideo();
});
}

你开始在你的HTML内嵌框架。我认为你需要更换带有ID的DIV player ，然后指定视频ID，当你实例化的播放器对象onYouTubeIframeAPIReady 。像这样：

<div class="modal fade" id="video_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div id="player"></div>
            </div>
        </div>
    </div>
</div><!--/modal fade-->

jQuery( document ).ready(function() {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


    jQuery("#video_modal").on('shown.bs.modal', function() {
        if(typeof player.playVideo == 'function') {
            player.playVideo();
        } else {
            var fn = function(){
                player.playVideo();
            };
            setTimeout(fn, 200);
        }
    });
    jQuery("#video_modal").on('hidden.bs.modal', function() {
        player.stopVideo();
    });
});

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        videoId: 'zg8KE6bEP50',
    });
}

此外，还有其他一些小错误，就像你所需要的一些井号video_modal ID，我改变了tag.src从player_api到iframe_api 。

编辑：发布全JS，因为有一些其他的小错误。

编辑^ 2：所以我认为 onYouTubeIframeAPIReady的onReady直到视频是可见的（这恰好为的结果。该事件不会甚至引起火灾show.bs.modal ）。所以第一次onPlayerReady被调用时， show.bs.modal已经解雇，只有经过它的jQuery注册show.bs.modal事件。我改变了上面的代码你的模式如右图所示，从文件准备/隐藏事件进行注册，如果调用playVideo方法不存在，它会稍后再试。这是一种哈克，但我敢肯定，你可以改善它。

我不知道如果做太多的感觉，所以这里的种类发生了什么事的示意图：

click modal button -> shown.bs.modal fires -> player onReady fires -> calls onYouTubeIframeAPIReady -> register event listener for shown.bs.modal to play video