Make Flash sit behind HTML elements
In the coming up version of List Central users will be able to include embedded content in their lists, including youtube videos and the like. In testing this feature with video contents I noticed a serious problem with the way the flash content of the videos interacted with the List Central Interface. Specifically, my Ajax style pop up forms would be partially behind the video content, making the edit list item form next to unusable. Not good!
With the help of John Oxton I was able to figure out how to get the flash content to stay behind my floating html content. Essentially it took two steps:
- Add a wmode parameter to the embed code, as well as a wmode attribute to the embed element, both set to transparent. The Perl code I used to do this is:
- Set the z-indexs in the CSS, giving my floating HTML content a higher z-index than the div containing the flash content.
$EmbedCode ~= s/<embed/<param name="wmode" value="transparent" /></param><embed wmode="transparent" /;
2 easy steps, and voila! Everything is layered just how I intended. Beautiful!
















Discussion