You are here: Home / What do you need? / Help and documentation / HTML, JavaScript and client side stuff / You Tube video appears in front of drop down menus etc

You Tube video appears in front of drop down menus etc

by Darrell Kingsley — last modified Mar 13, 2014 02:21 PM
This problem is caused by the Flash movie player ignoring z-index and always putting its content on top

This particularly applies to Internet Explorer, but can affect other browsers too. It is similar to the Flash movie problem with drop down navigation, and the solution is kind of similar too.

Instead of your embed code being (which is what YouTube gives you):

<iframe title="YouTube video player" width="300" height="199"
src="http://www.youtube.com/embed/XXXXXXXXXX?rel=0" 
frameborder="0" allowfullscreen></iframe>

It should be:

<iframe title="YouTube video player" width="300" height="199" 
src="http://www.youtube.com/embed/XXXXXXXXXX?rel=0&wmode=transparent"
 frameborder="0" allowfullscreen wmode="Opaque"></iframe>

This adds 'wmode="Opaque"' to the iframe embed tag and '&wmode=transparent' to the embedded video src of the iframe. This will be '?wmode=transparent' if there is no pre-existing query string (i.e. ?rel=0 here).

That will fix it.