Question

有关如何在按下“关闭”按钮或甚至关闭模态视图后停止在后台连续播放YouTube视频的任何建议？

<a data-toggle="modal" href="#videoModal">
    <img class="img-responsive img-rounded" src="http://iconshots.com/wp-content/uploads/2010/01/final1.jpg">
</a>

<div class="modal fade" id="videoModal">
    <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>
                <h4 class="modal-title">Learn how to make this app!</h4>
            </div>
            <div class="modal-body">
                <iframe width="500" height="281" src="http://youtu.be/GWPc6EDwv8k" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>

Answer 1

使用一些jQuery，你可以这样做：

$('#someButton').click(function(){
   $('#playerID').get(0).stopVideo();
)};

以下是与您的问题相关的帖子，希望它可以为您指明正确的方向：Youtube api - stop video

Answer 2

所以我发现这个在线投入了大量的研究，这对我有用。我创建了一个单独的js文件，然后将其链接到页面。

    /*Function built to take on search for youtube video in modal*/
function ytplayer() {
    $('#videoModal iframe').attr("src", $("#videoModal iframe").attr(
        "src"));
}  
/*Function shuts down video when dismiss button is toggled*/
$('.close').click(function() {
    $('#videoModal').hide();
    ytplayer();
});

/*Function shuts down video when modal background is toggled*/
$('#videoModal').on('hidden.bs.modal', function() {
    ytplayer();
});

嵌入式Youtube视频在被解雇后继续播放

2 个答案: