On Flash, layers, and HTML5

A common problem when embedding Flash elements on a website is where the Flash content insist on being shown on top of all other overlapping layers of content. For example if you want to show photos in a lightbox on a page with Flash ads, you see the ads bleed through the lightbox and photo.

This is a known problem and the fix is generally to set wmode to opaque or transparent depending on your needs. Problem solved.

That’s what I though when I ran into the problem on eventzonen.dk. It turned out to be not that easy.

Webkit, I love you, but…

Sure, setting wmode let the Flash player obey the specified z-indexes, in all but Webkit based browsers (I presume Webkit was to blame, but to be honest, I only verified in Google Chrome).

eventzonen.dk is marked up in HTML5, and we’re using pretty standard object/embed tags to bring in YouTube movies on artist profile pages. According to HTML5 validator the object tag must have either a type or a data attribute.

We were using the data attribute only. And that apparently makes Chrome layer the Flash element on top of everything.

The fix

Simply adding a

type="application/x-shockwave-flash"

to the object tag fixed the problem and our photo lightbox now happily overlays YouTube videos – even in Chrome.