Question

我在这里尝试了几种解决方案，似乎没有一种方法适合我。我在同一页面上有几个模态调用，每个都有一个youtube视频，在关闭模式后继续在后台播放。它只适用于Firefox。然后我找到了这个解决方案：

How To: Stop a YouTube Video from Playing when Closing a Lightbox Modal

// We're binding to the 'afterClose' event that facebox
// fires when closing a lightbox instance
jQuery(document).bind('afterClose.facebox', function() {
// target iframes with src attribute containing 'youtube'
// (within the facebox-generated .popup wrapper).
var vid = jQuery('.popup iframe[src*="youtube"]');
// if such an element exists
if ( vid.length > 0 ){
// get iframe's src attribute and cache it to a variable
var src = vid.attr('src');
// empty the iframe's src attribute
// (this will kill the video playing)
vid.attr('src', '');
// and restore the iframe src url, ready to be played
// again when the lightbox is displayed
vid.attr('src', src);
}
});

我改为：

jQuery(document).bind('hidden.bs.modal', function() {
var vid = jQuery('#portfolioModal1 iframe[src*="youtube"]');
if ( vid.length > 0 ){
var src = vid.attr('src');
vid.attr('src', '');
vid.attr('src', src);
}
});

如果在关闭Modal＃1时能够很好地停止视频，那么现在我在该页面上还有8个模态，并且不知道如何将它们的ID添加到脚本中。我试过var vid = jQuery('#portfolioModal1, #portfolioModal2, #portfolioModal3, #portfolioModal4 iframe[src*="youtube"]');，但显然没有用。

Answer 1

以下脚本将检测模态是否隐藏，并使用youtube播放器API停止视频。

$('.modal').on('hidden.bs.modal', function () {
player.stopVideo();
})

关闭多个Bootstrap 3模态时停止Youtube视频

1 个答案: