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.