embed tag inside Bootstrap Modal not visible in FireFox

Question

I have an <embed> tag inside Bootstrap Modal to Play video(tested with both vlc(2.1.3) plugin and flash). It is working fine in Chrome, Safari and Opera, but in Firefox, the video is not displaying but it is running in the background, I could hear the audio, but not able to see video. I set z-index to higher value but no use. Googled a lot, but can not find an answer, any help would be appreciated.

similar issue here : Issue using Flash within bootstrap 3 modal

Answer 1

You can override the transform style just for Firefox by adding the following style to your stylesheet:

.modal.in .modal-dialog { -moz-transform: none; }
.modal.fade .modal-dialog { -moz-transform: none; }

This even preserves the fade-in effect of the modal dialog

Answer 2

if I use $("#myModal").modal('show'); the plugin is not visible

remove fade class from popup

<div class="modal fade" id="myModal">

<div class="modal" id="myModal">

and change javascript to

 $("#myModal")css("display", "block"); 

now the plugin is visible

I dont know the technical details, but the issue is in fade css class and show method

Answer 3

I had similar issue so hopefully my solution might help some of you... I suppose you are using flash player because that issue happens only on flash players. If so, there is an issue with wmode so try adding:

    *<param name="wmode" value="transparent"/>*

or adding ?wmode=transparent in case you are calling direct URL (YouTube for an example)...

Answer 4

Easy solution is to add wmode="transparent" to <embed> tag

ex : <EMBED src="myfile.swf" wmode="transparent" FlashVars="mydata" WIDTH="650" HEIGHT="400" NAME="myFlash" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>