Sub-Menu is behind and covered by YouTube video


Question:

My submenu is getting covered by my YouTube video – see two screenshots below:

Answer:

YouTube videos are iFrame – Flash objects. By default Flash objects will overlap anything and everything on a website.

Simply add &wmode=transparent to your embedd code as shown in the examples below.

If you are still using the old embed code we strongly recommend to switch to the new iFrame embed code.

 

-> A complete example code for the “new iFrame” code would look like this:

Before:

<iframe style=”float: right; margin: 10px;” frameborder=”0″

height=”197″ src=”http://www.youtube.com/embed/SPNeduZ8?fs”

width=”315″></iframe>

 

After:

<iframe style=”float: right; margin: 10px;” frameborder=”0″

height=”197″

src=”http://www.youtube.com/embed/SPNeduZ8?fs/?&wmode=transparent

width=”315″></iframe>

 

Update: Google Chrome Bug

Some versions of Google Chrome do not properly respect the code above.
This is a well known Chrome bug and is scheduled to be fixed by Google.

Use the following:

Google Chrome Youtube issue