Dropdown contents not overlapping video player

Question

I have an object tag for playing videos on my page:

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" data="mms://TAL-BBSR-01/01_Debugging.wmv" width="100%" type="video/x-ms-asf" height="400" wmode="opaque" url="mms://TAL-BBSR-01/01_Debugging.wmv">
<param name="url" value="mms://TAL-BBSR-01/01_Debugging.wmv">
<param name="filename" value="Video">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<param name="wmode" value="opaque"> <embed height="100%" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="100%" src="mms://TAL-BBSR-01/01_Debugging.wmv" showcontrols="true" autostart="true">
</object>

I put this in the AngularJS template and the video rendering is working fine.

I have a navigation bar at the top of the page. When the user hovers on the bar and the dropdown appears when the video is playing, the dropdown appears behind the video player(I tried giving z-index to video player and the dropdown classes. Still doesn't work). So the whole dropdown contents are not visible. How can I solve this issue?

UPDATED(based on the comments given):

jsfiddle link:

http://jsfiddle.net/akonchady/8LDtN/5/

Answer 1

This is already asked here: How to add wmode="transparent" for every flash object & ebmed tag?

I use this for problem like this, give it a try

Here is the code

$("object[type='application/x-shockwave-flash']").append('<param name="wMode" value="transparent"/>');