Tips and Tricks

Recently I was setting up an HTML page together that had an embedded  flash movie. I also used jQuery Colorbox on the same page to display some external content in an “iframe” that dimmed the background while the Colorbox window was up.

Now the problem:

The Flash movie was still showing on top of the Colorbox window. It sort of worked fine on Firefox and Chrome but in IE 8 (IE 9 was fine) the problem was particularly prominent as the whole of the Flash movie sat on top!!

Solution:

A quick search in Adobe Flash docs, I found that there is a parameter called WMODE that controls how flash movie behaves when interacting with other HTML elements.

• 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 – Movie hides everything on the page behind it
• Transparent – Background of the HTML page shows through all transparent portions of the movie, this may slow animation performance

Example:

<object .....>

.....

<param name="wmode" value="transparent">

.....

<embed ..... wmode="transparent" .....>

</object>

And voila!! Perfect result.