jquery - 使用 Twitter Bootstrap 自动启动和停止 YouTube 视频

Question

lightbox当用户单击视频缩略图时，我正在使用 Twitter Bootstrap 的模式框弹出视频（例如： http ://seniorshomecare.harmonyapp.com/how-we-can-help，使用密码：shc）。如果可能的话，我希望视频在lightbox弹出时自动播放，并在用户关闭时自动停止lightbox。有一些类似的问题，但没有一个对我有太大帮助。

任何帮助将不胜感激。谢谢！

Answer 1

添加&autoplay=1到 youtube 视频网址。

http://support.google.com/youtube/bin/answer.py?hl=en&answer=1181821

---

编辑：

您可以使用事件显示来触发将代码添加到模式中的功能

$('#myModal').on('show', function () {
  $('div.modal-body').html('<iframe src="http://www.youtube.com/v/itTskyFLSS8&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1" width="500" height="281" frameborder="0" allowfullscreen=""></iframe>'); 
});

演示：http: //jsfiddle.net/baptme/WrrM3/

解决方案不完整，您必须在关闭模式时删除 iframe。

Answer 2

这将在模态关闭时删除 iFrame：

$('#myModal').on('hide', function () {
$('div.modal-body').html(' ');  
});

http://jsfiddle.net/WrrM3/82/

Answer 3

如果您的页面上只有一个模式，上述答案会很好地工作。如果您有多个，您的视频将被加载到所有其他模式中，并开始在某些浏览器中同时播放。

要解决该问题，请更具体地使用通过添加#myModalbefore来插入和删除视频的 javascript，div.modal-body如下所示：

$('#myModal').on('show', function () {
  $('#myModal div.modal-body').html('<iframe src="http://www.youtube.com/v/itTskyFLSS8&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1" width="500" height="281" frameborder="0" allowfullscreen=""></iframe>'); 
});

$('#myModal').on('hide', function () {
  $('#myModal div.modal-body').html('&nbsp;');  
});