Bootstrap Modals和Youtube：自动播放和关闭时停止

我需要能够在打开Twitter Bootstrap模式时自动播放youtubevideo，然后在关闭时停止该video。

我知道之前已经问过这个问题，但是我能找到的答案会导致很多包含许多video的页面的javascript代码，我试图减少膨胀。 到目前为止，我有以下工作用于个别video，但问题是每个模态和每个video必须使用适当的变量重复此javascript代码。

$('#vidThumbnail-1').click(function () { var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&autoplay=1'; $('#vid1').modal('show'); $('#vid1 iframe').attr('src', src); //Fit Vids Implamented Below for Mobile Compatibility $("#vid1Thumbnail-1 iframe").wrap("
"); $(".flex-video").fitVids(); }); $('#vid1 button').click(function () { $('#vid1 iframe').removeAttr('src'); }); 

HTML：

 
 
 
  × 
  

当你有20个video和20个模态时，这会变得臃肿！ 有没有办法利用数据属性方法启动模态内置引导程序而不是单独调用它，同时仍然只在目标模态中修改iframe src？ 打开模态的链接将是：

然后：

1. 读取目标模态中iframe的现有src属性（将其设置为变量？）
2. 使用“＆autoplay = 1”附加现有src属性以启动video。
3. 在关闭模态时将src属性替换为原始属性（通过按钮，特别是像上面那样很好）。

这样我就不需要为每个单独的模态编写脚本，节省了大量的时间和臃肿的JS。 但是，我不知道从哪里开始修改bootstrap.js来实现这一目标，而且我没有经验JS（或任何）编程。 感谢你给与我的帮助！

Answer 1

我的解决方案

• 不要手动将if &autoplay=1添加到iframe src

然后添加此脚本：

 var videoSrc = $("#myModal iframe").attr("src"); $('#myModal').on('show.bs.modal', function () { // on opening the modal // set the video to autostart $("#myModal iframe").attr("src", videoSrc+"&autoplay=1"); }); $("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal // stop the video $("#myModal iframe").attr("src", null); }); 

Answer 2

  
  × 
 $('.close').on('click', function (e) { $("#myModal iframe").attr("src", null); }); 

Answer 3

这是一个JS小提琴 。

我已经添加了一些渐进式增强function，因此在这种情况下，如果JS失败，您将被带入YouTubevideo。

该链接需要一个数据video嵌入和一个目标，我们将添加video，其他任何东西应该工作。 示例中的事件是Bootstrap 3模式，如果您使用的是2.X，它将只是“隐藏”。

 $('[data-provider="modal-video"]') .on('click', function (evt) { evt.preventDefault(); var $target = $(evt.currentTarget), videoSrc = $target.data('video-embed'), $modal = $($target.data('target')); $modal .find('iframe').attr('src', videoSrc) .end() .on('hide.bs.modal', function () { $(this) .off('hide.bs.modal') .find('iframe').attr('src', ''); }) .modal('show'); }); 

Answer 4

我找不到动态的方法来处理这个问题，所以我创建了一个动态的方法来处理我们正在处理的网站。

以下是链接：

 
Video: video 1
 
Video: video 2 

这是模态：

这是脚本：

 // autoplay video functionality $( "[data-target^='#video']" ).click(function() { // get the ID of the clicked video var dataTarget = $(this).attr("data-target"); dataTarget = dataTarget.substring(1,7); var vidId = '#'+dataTarget; // get the vid src var vidSrc = $(vidId+ " iframe").attr('src'); // create the autoplay var vidSrcAuto = vidSrc+'?autoplay=1'; // get the iframe element var iframeEl = $(vidId+ " iframe"); $(vidId).on('show.bs.modal', function () { $(iframeEl).attr("src", vidSrcAuto); }); $(vidId).on('hidden.bs.modal', function (e) { $(iframeEl).attr("src", vidSrc); }); }); 

Answer 5

您好@Benjamin Morrison希望您已经获得解决方案，我正在为仍在寻找相同解决方案的其他用户回答此问题

 $(document).ready(function() { $('.modalclick').on('click', function(e) { e.preventDefault(); var src = $(this).attr('href'); $('#myModal').modal('show'); $('#myModal iframe').attr('src', src); }); //auto close or pause on model hide $("#myModal").on('hidden.bs.modal', function(e) { $("#myModal iframe").attr("src", ''); }); }); 

    
 
 
 
 
 
  
 
 SKIP >> 
 
 
 
 click me
 click me 1
 click me 2