HTML on top of Flash

It is pretty easy to place HTML on top of Flash. Or at least I though so.
In order to allow HTML content to be written on top of Flash content, you must apply the “wmode=opaque” (or “wmode=transparent“) parameter to the Flash, like this:

<embed
    height="200"
    width="800"
    allowfullscreen="true"
    wmode="transparent"
    expressinstall="true"
    type="application/x-shockwave-flash"
    src="/flash/myflash.swf"
    pluginspage="<a href="http://www.adobe.com/go/getflashplayer">http://www.adobe.com/go/getflashplayer</a>"
    flashvars="somevars">
</embed>

Or if you use jQuery you can apply the wmode parameter like this:

<script type="text/javascript" language="javascript">
  $jQuery(document).ready(function() {
    $jQuery('#FlashDivID').flash({
      src: '/flash/myflash.swf',
      allowscriptaccess: 'always',
      width: 800,
      height: 200,
      expressInstall: true,
      wmode: 'transparent',
      allowFullScreen: true,
      flashvars: { somevars }
    },
    { version: 8 }
    );
  });
</script>

This should do the trick. But in a recent project I ran into the problem that my DHTML top menu which rolls over my top Flash was rendering fine on top of the Flash, but some HTML that was placed further down on my page was not. If i ran my page in IE8, my top menu HTML rendered on top of the Flash, but the other HTML ran below. In IE7 both worked fine.

Here is the trick: if your CSS does not have the position:relative style on the DIV (or span or UL or whatever) that contains the HTML to render on top of the Flash, the HTML will be rendered below.

This is my original CSS:

div.secondary-column {
  float:left;
  width:265px;
}

This is my modified CSS that allows my HTML to be rendered on top of the flash:

div.secondary-column {
  float:left;
  width:265px;
  position:relative;
}

The solution is simple, yet it took me hours to find…

Advertisement