Question

我不知道怎么做，但它发生了：jsfiddle

当显示twitter bootstrap 3模态时，它会落后于视频iframe。

<div class="modal fade">
    ...
</div><!-- /.modal -->

<iframe src="http://www.youtube.com/embed/your_favorite_video" allowfullscreen="" ></iframe>

似乎z-index也无济于事。

更新：

我使用 Mozilla Firefox 25.0.1 for ubuntu canonical 1.0 。

其他的浏览器很好：

Windows上的Mozilla Firefox很好
Ubuntu上的Opera很好
...

Answer 1

从这里采取：YouTube Video Embedded via iframe Ignoring z-index?

这对我的小提琴起了作用

//Fix z-index youtube video embedding
$(document).ready(function (){
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});

Answer 2

您只需将查询参数“wmode = transparent”添加到嵌入视频的src网址即可：

<iframe src="http://www.youtube.com/embed/your_favorite_video?wmode=transparent" allowfullscreen="" ></iframe>

Twitter引导模式落后于iframe

2 个答案: