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>