Overlap HTML elements using css

Question

I am doing a project where I have to display video using Flash OSMF player. Also I have to display some text and image on top of the player.

It's working pretty cool in chrome and IE. When it comes to Firefox and safari the text element is hiding behind the video player. I have z-index CSS property to make it to the front but no luck it's still hidden in the background .

I have a live site http://www.tallenge.com/alcy-caluamba/all-categories1/general23/lecrae-i'm-turnt--choreography-by-alcy/vote

Since it is not working in Firefox I have changed the player only for Firefox and safari to html5 player in live site, so that it is displaying text as expected. For testing you can take player code(under medidplayer element) from chrome and replace it in Firefox - you will get the issue I have mentioned above. Any help/suggestion would be greatly appreciated . Thanks in advance ...

Answer 1

This problem can be related to the wmode setting of the Flash player object, see the Adobe documentation of this setting:

https://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html#main_Using_Window_Mode__wmode__values_

You can try using wmode="opaque" as a param of the Flash object:

<param name="wmode" value="opaque"/>

However according to the Flash docs in that mode the plugin is not able to take advantage of hardware acceleration.

Unrelated question, if you already used the HTML5 video tag as a fallback for Firefox, why Flash? I'll take the opposite direction HTML5 video tag by default, Flash as a fallback for old browsers.