Thursday, September 10, 2009

Embedded Flash z-Index

Recently I was working on a web site that had embedded Picasa slide shows and YouTube videos.  (No, I didn’t want to build my own out of AJAX and web services.)

I found that my embedded flash objects were over lapping my html elements.  This was problematic in that I had my navigation disappear whenever the flash object was “scrolled” over it.

The fix was to add the attribute “wmode” with a value of “opaque” (wmode=”opaque”) to the embed tag.  Voila, the overlapping z-index problem was solved.

In case you’re wondering messing with the CSS z-index value of the containing layers didn’t change anything.

No comments: