Leosquarez – Website Design and Development

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% [?]

Posted by leosquarez On October - 1 - 2009 Web Development

5 Responses to “Embed Video/Flash Z-index Issue”

  1. peter says:

    Thanks a lot, just had the same bug, I was about to destroy something!!!

  2. leosquarez says:

    Thank you for comment for any other question let me know.

    Leo

  3. Hey there, interesting site, just wondering what spam blocker system you have on your site for cleaning up comments since I am getting lots on my site.

  4. leosquarez says:

    Hi,

    I’m using the Default on of Wordpress -> Akismet (http://akismet.com/)
    Yo activate it you have to sign up on wordpress.org and get the API KEY..

    Let me know..
    Leo

  5. video xxl says:

    This is easier and surely gives comfort to internet users. Thanks for sharing. Post like this offers great benefit. Thank you!..

Leave a Reply

Subscribe here

VIDEO

TAG CLOUD