Change wmode attribute to opaque to prevent overlay issues with flash object

Copy from: http://work.arounds.org/issue/23/layering-flash-under-html-layering-html...

A very common issue when embedding flash videos in a content area is that since they are given a high stacking order priority, they overlay elements such as absolutely positioned dropdown menus or lightbox.

Even if you set a higher z-index on the menu dropping down, the flash will completely overlay and cut off the menu.

If video filter set wmode attribute to transparent or opaque we could avoid all those issues with modal frames (lightbox, fancybox, ...).

Wmode

There are various window modes available which you can specify to your flash element:

• window - This is the default wmode and this means that the flash element embedded in the web page is really layering over the browser in it's own window. If we do not specify a wmode this is automatically selected for us.
• transparent - If you specify this mode, the flash element will not be hovering over the page in it's own window as is the case with the window mode, but it will respect stacking order layering ( z-indexes ). This is pretty much the same as opaque, except this will allow for elements behind transparent layers in the movie ( if any ) to be seen through.
• opaque - Like transparent, this will make the flash element not render in it's own window like the window mode and it will respect z-indexing so you can layer html over flash. Unlike transparent, it won't allow for elements behind transparency to be seen.
  With this in mind, now we know that we should apply a wmode of either transparent or opaque. I usually go with transparent as it covers the same base as opaque except is lenient enough to allow content behind to show through transparency.

To solve the overlay issues you could choose between opaque or transparent, I think opaque is faster than transparent wmode.

Workaround

Firstly, we need to make sure the object/embed element has a wmode of transparent. If you are dealing with an object element, alter your object to include the wmode parameter:

<object type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf" width="640" height="360">
    <param name="wmode" value="opaque">
    <param name="allowscriptaccess" value="always">
    <param name="allowfullscreen" value="true">
    <param name="movie" value="http://vimeo.com/moogaloop.swf">
    <param name="flashvars" value="clip_id=13703065&amp;color=00adef&amp;fullscreen=1&amp;server=vimeo.com&amp;show_byline=1&amp;show_portrait=1&amp;show_title=1">
</object>

For the non-standard embed element, apply it like so:

<embed src="data.swf" wmode="opaque"></embed>