Web Design Philippines | MikeWagan.net

Allow Div Layers to Float over Flash, Youtube or Vimeo Videos

Feb 6, 2010 Web Design, Web Design Tutorials, Work

For web designers, its always a constant struggle to get those flash, youtube, or vimeo videos tuck under divs where you need them. They somehow always behave like their z-index is close to infinity.

By default Flash content in a web page will appear on top of other elements on the page, including floating menus, inline popups etc. This can be pretty annoying if you have a flyout menu on your page and it goes behind the Flash video and this post shows how simple it is to fix. This works in all browsers inclding IE6+

The first screenshot below shows the default behaviour where the floating menu appears behind the Vimeo Flash video:

The second screenshot below shows the desired behavioiur where the floating menu appears on top of the video:

The following <param> should be added within the <object>:

<param name="wmode" value="transparent" />

And the following should be added into the <embed> tag:

wmode="transparent"

The end result will be something along these lines:

<object width="400" height="300">
  <param name="wmode" value="transparent" />
  <param value="true" name="allowfullscreen" />
  <param value="always" name="allowscriptaccess" />
  <param name="movie" value="..." />
  <embed width="400" height="300" allowscriptaccess="always"
    allowfullscreen="true" type="application/x-shockwave-flash"
    src="..." wmode="transparent">
  </embed>
</object>

Now floating content will appear above the video.

Source: ElectricToolbox.com

Related posts:

1. Super Bowl 2009 Videos I have here a collection of the 2009 super bowl videos which I would like to share to you. Cracked.com...
2. Please Don’t Watch This Video! This was me two years ago nung adik pa ako sa gitara at pagbabanda. Ampanget ko dito, hehehe… Just a...
3. First Solid Food ni Jian Eto ang unang try ni Jian sa pagkain ng solid food. Five months sya kumain ng first solid food (malambot...
4. Achmed the Dead Terrorist Achmed the Dead TerroristAlthough this video has been around at least one year, my wife just told me about it...
5. Jian’s First Haircut After his first birthday, we scheduled one weekend to take Jian to Festival Mall to have his first haircut at...
6. Transformers 2, MJ and A Contest for My Wifey We watched Transformers 2: Revenge of the Fallen over the weekend at MOA and we were quite disappointed because we...
7. Palistuhan with Ramon Bautista and Francis M. Kagagaling ko lang sa Palistuhan.com.ph at talaga namang kahanga-hanga ang pagkakagawa ng Flash site nila. Bukod dun, meron silang online...
8. My Shopaholic Confession Hi my name is Mike and I’m a Shopaholic!Wait, wait, wait! Mike, you’re a shopaholic?! Well, I think the most...

Tags: youtube vimeo flash