FlashHeed: Fixing the Flash Z-index Problem For Ads

Here at Scribd, we’ve moved on from Flash and are embracing HTML5 as the open standard for reading on the web. Unfortunately, the ad industry has not quite caught up yet, as many ads are still flash, and probably will be for some time.

The dreaded problem that most web developers come across is the z-index issue with flash elements. When the wmode param is not set, or is set to window, flash elements will always be on top of your DOM content. No matter what kind of z-index voodoo you attempt, your content will never break through the flash. This is because flash, when in window mode, is actually rendered on a layer above all web content.

There is a lot of chatter about this issue, and the simple solution is to specify the wmode parameter to opaque or transparent. This works when you control and deliver the flash content yourself. However, this is not the case for flash ads.

The majority of flash ads don’t specify a wmode parameter, which will put flash into window mode. Why they don’t specify transparent or opaque is a mystery to me. This is a nightmare for pages that have UI elements that depend on z-index, like dropdown menus and lightboxes. Google even has an article about avoiding these sorts of elements altogether when they are in close proximity to ads.

I personally disagree with the notion of redesigning your UI because of display ordering issues with flash ads. It just doesn’t make sense from a product standpoint. And look! Even YouTube, owned by Google, has z-index flash issues with their own ads:

So, to solve all this, I wrote some javascript that will dynamically add the correct wmode parameter. I call it FlashHeed. You can get it now on the GitHub repo.

It works reliably in all major browsers, and has no dependencies, so feel free to drop it into your Prototype or jQuery dependent website.

The usage is simple: just include the FlashHeed javascript in the head of your page, and call it like so:


FlashHeed.heed();

And you’re done. All the flash ads on the page will now heed to the z-index ordering. No more embarassing lightbox and dropdown menu occlusions.

Under the hood, FlashHeed injects the correct wmode parameter and actually forces the flash to re-render. This is the only reliable way that I’ve found to kick the flash into the correct wmode.

Update 11/14/10:

Note that FlashHeed will not work on flash ads or elements that are embedded inside iframes, due to cross domain policies. Unfortunately, I don’t have a solution for those. If anyone has a suggestion, please comment below.

James Yu, Lead Developer at Scribd

About these ads

21 responses to “FlashHeed: Fixing the Flash Z-index Problem For Ads

  1. Andrew Machado

    Will this also solve the double iframed ads/videos issue in Safari and Chrome Mac. Where is the ad or video is in two iframes it shines through?

  2. Pingback: FITC // Weekly Link Roundup 11/08 – 11/12

  3. Pingback: New Campaign Seeks to Stop Flash Ads From Breaking the Web

  4. Pingback: New Campaign Seeks to Stop Flash Ads from Breaking the Web (Mashable) | Web Resources

  5. Pingback: New Campaign Seeks to Stop Flash Ads from Breaking the Web (Mashable) | News

  6. Pingback: New Campaign Seeks to Stop Flash Ads from Breaking the Web (Mashable) | The Freedomist

  7. DJ

    FYI: not all wmodes are created equal. The transparent wmode is expecially CPU/GPU intensive. Sometimes changing the wmode degrades the user’s experience more than a mal-layered element.

    That said, nifty little feature! If only you could ensure that dynamically generated ads from 3rd party networks don’t set their own z-index to be 999999999…

  8. Phil

    Awesome – thanks so much! What’s the usage license?

  9. Vincenzo

    I have the flash problem with android. I tried using this javascript but it doesn’t solve the problem. Any hints?

  10. Darren

    Brilliant, just brilliant! Thanks :)

  11. Du

    hi, James:
    I am a newbie. I don’t know where and how to exactly insert:

    FlashHeed.heed();
    can you give me an example?
    I put flash file as a widget in widget area and this mothd does work or not?
    Thank you

  12. Du

    hi, James:
    I am a newbie. I don’t know where and how to exactly insert:

    “”
    “FlashHeed.heed();”

    can you give me an example?
    I put flash file as a widget in widget area and this mothd does work or not?
    Thank you!!

  13. good solutions. But i am looking for flash ad embedded in iframe.:) Pls help.

  14. TonHoekstra

    Unfortunately not working for flash ads or elements that are embedded inside iframes, anyone has an solution for that?

    Thanks in advance.

  15. When flash content is in an iframe apply the script to the src of the iframe, so if your iframe loads from xyz.html then fix the flash content in xyz.html.

    that’s what worked for me.

  16. Nok

    you just have same my work

  17. You’re a genius :)
    Really good work, I just done the same, I just forgot to rerender in IE.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 55 other followers

%d bloggers like this: