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.
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.
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.