Leosquarez – Website Design and Development

Today i add a video in one of my client web site and i realise that the drop down menu was disappearing below the video.

The video embedding code was:

<object height=”340″ width=”560″>
<param name=”movie” value=”URL-VIDEO”>
<param name=”allowFullScreen” value=”true”>
<param name=”wmode” value=”opaque”>
<param name=”allowscriptaccess” value=”always”><embed src=”URL-VIDEO” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” height=”WIDTH” width=”HEIGH”>
</object>

I realise that was a Z-INDEX issue (more info on z-index), i did check on the web for few solution.

First solution that i found was:

SWFObject, Flash and the z-index

This solution suggest to:

• Set wmode=”opaque” combined with positioning
• Wrap the object with a div with position: relative and set the object position: absolute.

CODE

#wrapper { position: relative; }
#overlay { position: absolute; }

-----
<script type="text/javascript">

   var flashvars = {};
   var params = { wmode: "opaque" };
   var attributes = {};

   swfobject.embedSWF("video.swf", "flash", "width", "height", "7",
                      "expressinstall.swf", flashvars, params, attributes);

</script>
-----
<object id="flashcontent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
   <param name="movie" value="movie.swf" />
   <param name="wmode" value="opaque" />

   <!--[if !IE]>-->
   <object type="application/x-shockwave-flash" data="video.swf" width="550" height="400">
   <param name="wmode" value="opaque" />
   <!--<![endif]-->

      <p>Please update your Flash Player</p>

   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->

</object>

Popularity: 8% [?]