YouTube iFrame Embed Video Problem – Hides Menus & Other Layers
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.
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
Here’s the parameter you should add to the YouTube URL in the iFrame embed code:
?wmode=transparent
Example iFrame code:
Code With Fix Applied:
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:
Code With Fix Applied:
Your
Final Code may also look something like this. Notice the &
where the single “&” was in the previous example – they are the same
thing, one is just encoded.
