How to fix a YouTube iFrame Video Displaying Over a Site 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.

Sounds 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(AKA Site menu doesn't display properly)

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>