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

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 SOLUTION:

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