Twitter bootstrap modal goes behind iframe

Question

I don't know how, but it happens: jsfiddle

When showing twitter bootstrap 3 modal, it goes behind video iframe.

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

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

it seems z-index cannot help too.

UPDATE:

I use Mozilla Firefox 25.0.1 for ubuntu canonical 1.0.

Other browers are fine:

Mozilla Firefox on windowse is fine
Opera on Ubuntu is fine
...

What browser are you testing in? Works fine in Chrome (latest prod) for OSX. — brandonscript, Dec 07 '13 at 07:48
Inclined to think that's a bug in the Firefox rendering instead -- works in Chrome-latest, Firefox 22.0 for OSX, and I even tried in IE10 — brandonscript, Dec 07 '13 at 08:09
possible duplicate of [How can I make iframe respect z-index in IE?](http://stackoverflow.com/questions/8278390/how-can-i-make-iframe-respect-z-index-in-ie) — GolezTrol, Dec 07 '13 at 08:14
It's not related to Ubuntu. I've got the same issue in IE11 on Windows 7. — GolezTrol, Dec 07 '13 at 08:19

score 2 · Accepted Answer · edited May 23 '17 at 12:25

2

Taken from here: YouTube Video Embedded via iframe Ignoring z-index?

This did the trick for me on your fiddle

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

edited May 23 '17 at 12:25

Community

1
1

answered Dec 07 '13 at 08:39

toast

660
1
5
12

since dynamic videos are shown, using `$(document).ready` is hard. can one do it by css? – barej Dec 07 '13 at 09:16

score 0 · Answer 2 · answered Aug 20 '15 at 18:23

0

You can Just add the query param, "wmode=transparent," to the src URL for the embedded video:

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

answered Aug 20 '15 at 18:23

Dr. Hilarius

1,134
1
14
20

thanks for the answer, however, i do not remember the problem anymore. – barej Aug 21 '15 at 01:21

Twitter bootstrap modal goes behind iframe

2 Answers2