Youtube嵌入了Twitter Bootstrap的问题

时间:2013-04-09 09:14:24

标签: html twitter-bootstrap youtube

我正在流行的BootStrap框架上构建一个小型静态网站。遗憾的是我不能给出一个链接,但基本上我已经构建了一个模式框,按下按钮点击并嵌入了YouTube视频。

它工作正常,但是如果你关闭模态框然后它就会消失,但是将YouTube视频留在其他所有内容上,无法摆脱它。这是在IE10上。

是否有其他人尝试将视频嵌入BootStrap模块框并为此提供解决方案?

提前致谢,

杰克

修改

好的,这是一段代码:

<a id="mediaVideo" class="btn btn-primary btn-large" href="#" data-toggle="modal" data-target="#video">Watch the interview</a>

<!-- Modal -->
<div id="video" class="modal hide fade" style="color: #2a2a2a; width: 590px;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">This is the modal title</h3>
</div>
<div class="modal-body">
<p>Small paragraph to describe the video</p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/H542nLTTbu0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close Window</button>
<div class="btn-group">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
Share This Video
<span class="caret"></span>
</a>
<ul class="dropdown-menu" align="left">
<li><a href="http://www.facebook.com/sharer.php?u=http://www.google.com">Facebook</a></li>
<li><a href="http://twitter.com/share?text=This%20is%20the%20text&url=http://www.google.com">Twitter</a></li>
<li><a href="https://plus.google.com/share?url=http://www.google.co.uk">Google+</a></li>
</ul>
</div>
</div>
</div>
<!--END MODAL-->

1 个答案:

答案 0 :(得分:0)

对我来说似乎工作得很好:jsFiddle。我在Google Developers咨询YouTube嵌入API页面时使用的是<iframe>选项。