Lots of websites I work on (including my own) use some Flash elements. I try to avoid them as much as possible, but when it comes to embedding videos from sites like YouTube and Vimeo, you just can’t help it! And now these days, there are lots of overlapping elements used in pages, the most common example being the modal/lightbox overlay windows. When you have embedded flash in your page and then open one of these overlays, the flash seems to always trump it and cover the overlay element. This had been a thorn in my side for many a times, and I keep forgetting that there IS A SOLUTION. So here it is, for me to remember as well as for you guys to add to your knowledge:

Embedded flash objects have an attribute called ‘wmode’ which is usually defaulted to ‘window.’ According to Adobe, here’s their description of what it is:

wmode – Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

• window – movie plays in its own rectangular window on a web page.
• opaque – the movie hides everything on the page behind it.
• transparent – the background of the HTML page shows through all transparent portions of the movie, this may slow animation performance.

Now to enable z-index’d elements in your page to display over the embedded flash, you need to change the wmode attribute to ‘transparent’:

<embed wmode="transparent" src="http://vimeo.com/moogaloop.swf?
clip_id=431114&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&
color=59a5d1&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true"
allowscriptaccess="always" width="300" height="224">

Actually, I didn’t figure this one out on my own. Full credit goes out to Julie Cousins:

I hope this helps!