Ever been working on a web application or site and encountered the nasty little issue of Flash floating over everything else?  No matter what you do to your markup or CSS, the Flash object just keeps appearing above everything in the page.  Forget about tweaking position properties or z-index values, it just won’t work.

The problem is often visible in blogs that embed YouTube videos and other Flash content.  Case in point, this recent post on TechCrunch.  When you mouse over any of the text links which spawn popup windows, you’ll notice the popups load under the embedded Flash video.  Very annoying.

So what’s the fix?  It’s really simple.  When embedding a Flash object, you have to add a “wmode” parameter.  After that, everything will work like a charm.

Let’s take a look at the source for the video which was embedded in the TechCrunch article.  Here’s what it looks like:

<object width="480" height="385">
  <param name="movie" value="http://www.youtube.com/v/IsV-lgnAjps&#038;hl=en&#038;fs=1&#038;"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/IsV-lgnAjps&#038;hl=en&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
</object

The video will display fine with this code.  But when you want another element to appear above the Flash content, you’ll discover that it looks something like this:

Add the wmode parameter and things begin to shape up.  Please note – you have to set wmode in TWO places; you have to add a new <param> tag and you also need to enter a wmode value in the <embed> tag.  The revised source with wmode set looks like this:

<object width="480" height="385">
  <param name="movie" value="http://www.youtube.com/v/IsV-lgnAjps&#038;hl=en&#038;fs=1&#038;"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <param name="wmode" value="opaque"></param>
  <embed src="http://www.youtube.com/v/IsV-lgnAjps&#038;hl=en&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="480" height="385"></embed>
</object>

…and the output looks like this:

As for why a popular tech site is pimping online dating profiles and free phones when they have absolutely nothing to do with the subject at hand, I’ll save that for another article on the problems plaguing online ad models.

Tweet This Buzz This Post Digg This Post Facebook Stumble This Post