使用 Twitter Bootstrap 自动启动和停止 YouTube 视频答案

【问题标题】：Auto Starting & Stopping a YouTube Video with Twitter Bootstrap使用 Twitter Bootstrap 自动启动和停止 YouTube 视频
【发布时间】：2012-07-24 01:48:14
【问题描述】：

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

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

【问题讨论】：

标签： jquery youtube twitter-bootstrap modal-dialog

【解决方案1】：

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

要解决该问题，请通过在 div.modal-body 之前添加 #myModal 来更具体地使用插入和删除视频的 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;');  
});

【讨论】：

【解决方案2】：

这将在模态框关闭时移除 iFrame：

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

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

【讨论】：

【解决方案3】：

将&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。

【讨论】：

加载页面时自动播放视频。在您单击预览图像并出现灯箱之前，我不希望视频开始播放。你怎么看？
@Andrew 好点子，你可以像在twitter.github.com/bootstrap/javascript.html#modals 中描述一样使用事件Show，并在打开的模式中使用jQuery 插入带有autoplay=1 的视频链接。
@Andrew，我建议使用shown 事件，因为它会考虑显示模态时可能发生的任何转换
@jackwanders 我曾考虑过使用shown 而不是show，但因为加载视频比完成css 转换需要更多时间，所以这并不重要。
谢谢大家，这行得通！我想我使用“隐藏”来删除 html 并因此停止它？