自动启动＆amp;使用Twitter Bootstrap停止YouTube视频

Question

当用户点击视频缩略图时，我使用Twitter Bootstrap的模式框弹出视频lightbox（例如：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

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

要解决此问题，请更加具体地说明通过在#myModal之前添加div.modal-body来插入和删除视频的JavaScript，如下所示：

$('#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;');  
});