If you’re here, then you’re looking for a solution to fix a display problem with your embedded YouTube iFrame video on your website. If you’re experiencing a problem with your rollover menu hiding behind the YouTube video, then give this a try.

YouTube iFrame Video Displays Over Menu

The iFrame is basically an element on your page and so is your rollover menu. There is what’s called a “z-index” that helps the browsers understand which elements to display in which order (front-to-back or back-to-front basically). If your menu is popping up behind the YouTube iFrame video, then most likely the z-index of your menu is lower than what YouTube is assigning their video player.

YouTube iFrame EmbedSounds pretty technical & perhaps it is, but there’s an easier solution for most of you. YouTube actually provides a parameter that you can add to the embedded iFrame URL to enable transparency (e.g. put it behind your dynamic menu).

If you can copy & paste some simple code and add it within the YouTube iFrame code itself, then you should have your problem solved in no time.

How to Fix the Embedded YouTube iFrame z-index Problem

Here’s the parameter you should add to the YouTube URL in the iFrame embed code:

?wmode=transparent

Example iFrame code:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM” frameborder=”0″ allowfullscreen></iframe>

Code With Fix Applied:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

Check Your Code Carefully

For those of you not too tech savvy, I want you to know that the above code will only work if you paste it on a clean YouTube iFrame URL – one that doesn’t have any existing parameters already.

For an iFrame URL that already has other parameters (e.g. related videos option, show in HD, etc), you need to use a slightly different parameter when you append it in the iFrame URL:

&wmode=transparent

Example iFrame code:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?rel=0&amp;hd=1″ frameborder=”0″ allowfullscreen></iframe>

Code With Fix Applied:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?rel=0&hd=1&wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

Your Final Code may also look something like this. Notice the &amp; where the single “&” was in the previous example – they are the same thing, one is just encoded.

<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?rel=0&amp;hd=1&amp;wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

A thank you is owed to Andrew @ Scorchsoft for the fix.

(Original image source: http://www.reelseo.com/youtube-iframe-html5/)