Allowing div layers to float over Flash/Vimeo/YouTube etc
Posted August 22nd, 2009 in HTML and CSS (Updated May 13th, 2011)
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+.
Update for YouTube iframe embedded content
Note that the technique here will not work for YouTube's newer way of embedding videos using an iframe. For the solution to floating content over YouTube's iframe see my new post titled "Float a div over a YouTube iframe".
The upcoming new version of the healthy.co.nz website has a floating menu and a TV section with Vimeo videos. This is a Flash movie player and uses <object> and <embed> tags to put the player in the page.
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:
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.
- Float a div over a YouTube iframe (Friday, May 13th 2011)
- "Clearing" floats with overflow: auto (Saturday, January 9th 2010)
- Grey out a webpage (Friday, June 26th 2009)
- Always show a vertical scrollbar in Firefox, Chrome, Safari and Opera (Saturday, June 20th 2009)
- Absolutely position an element within another element with CSS (Saturday, May 30th 2009)