VideoPlayer plugin does not show up in the jQuery/bootstrap modal popup div in FireFox

Question

I am working on a plugin which can record from webcam and playback on Windows.

It works fine in Chrome and IE. When comes to FireFox, it works well if I put the plugin in normal page. However, if I put the plugin object in a modal popup div, it just does not show up.

I also tried the example BasicMediaPlayer plugin coming along with FireBreath source code. It has exactly the same problem.

Does anybody encounter the same issue? What is the reason of this and how to work around?

Answer 1

Sounds like you figured it out, so let me spell this out more specifically. In some web browsers, and particularly these days in FireFox, certain CSS styles will cause the plugin to act strangely. I suspect the reason for this is that those styles cause the plugin to be moved from one window to another; if you change overflow, for example, it will be forced to move the plugin into a window with clipping, etc. Dont' think of this in terms of HTML, but underlying browser implementation.

Sounds like transform was the culprit this time, and again note that it would have put the plugin into the transform window that was created, thus again moving it and messing things up.

Be very, very careful what CSS styles are applied to the plugin and its ancestors in the DOM.