Shaun Mccran

My digital playground

13
A
P
R
2010

Flash content incompatibilities with lightbox’s and DHTML Div’s

I've seen the issue a few times in my travels where there is flash content on a page, and other content IE DHTML Div's has been triggered and the new content has slipped behind the flash in a really ugly way.

I found myself in this position building an image gallery with YouTube videos in it. Clicking on a lightbox link caused a flash video to show through the new lighbox pop up.

Like this: Test script showing flash messing up my lightbox.

This can be explained if we examine how the flash content is display in a browser window. Flash content does not actually sit within the same display layer as the rest of the browser window, it has its own display layer. The is referred to as the 'Window mode' (wmode).

There are three Window mode options, each with different attributes. These descriptions are lifted from the W3C standard definitions for the wmode property.

Window:
Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.

Opaque:
By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.

Transparent:
Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value. You can read more about these behaviours and their impact on Accessibly challenged users here: http://www.webaim.org/techniques/flash/

The fix

You can set the wmode on a flash movie by adding a param setting to the Object tag, and a name value pair to the Embed tag, like this:

view plain print about
1Object:
2<param name="wmode" value="opaque">
3
4Embed:
5Wmode = "opaque"

There is an example of this working here: Link

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Back to top