How to place an overlay DIV with opacity < 1 over a Flash object

We have a flash object and when we use blockUI or some other overlay div with opacity < 1, it doesn't make the flash area transparent. However, it do hides the flash object when opacity is 1, but I want to have the overly div transparent which make the flash area transparent too like it doing for other HTML objects.

Is it a know issue/thing? Any workaround?

Here is the code expert:

<object width="100%" height="200" align="" id="charts" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" wmode="transparent"> 
<param value="/charts.swf?library_path=/charts_library&amp;xml_source=/chart&amp;" name="movie"> 
<param value="high" name="quality"> 
<param value="#E6E6E6" name="bgcolor"> 
<param value="transparent" name="wmode"> 
<embed width="100%" height="200" align="" salign="TL" scale="noscale" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" swliveconnect="true" name="charts" bgcolor="#E6E6E6" quality="high" src="/charts.swf?library_path=/charts_library&amp;xml_source=/chart&amp;license="> 
</object>

For overlay div we are using jQuery.blockUI and FancyBox (when we need to some popup and block the UI). We also tried to overlay the flash object using a div with z-index. It overlays and hides the flash when opacity is 1 but not when it's < 1.

Here is the screen shot:

http://www.4shared.com/photo/PO-Cb1bi/Flash_Overlay_Transparency.html

Solution

You need to set the wmode parameter of the flash object to "transparent".

//Article

http://kb2.adobe.com/cps/142/tn_14201.html

//Video tutorial

http://kb2.adobe.com/cps/524/cpsid_52418.html#flash