Youtube Embed Overlap Issue [Resolved]

Keith Curreri - Blog Headshot

By Keith Curreri on October 11, 2011

Are you having issues with things overlapping your embedded Youtube videos? I recently embedded a Youtube video on a website and saw that my CSS drop down menus were overlapping the video. I tried setting some z-indexes and didn’t have much luck. Luckily I stumbled on a simple solution.

The Solution

Just add ?wmode=transparent to the end of the Youtube URL. For example:

Before

<iframe width="480" height="360" src="http://www.youtube.com/embed/oHg5SJYRHA0" frameborder="0" allowfullscreen></iframe>

After

<iframe width="480" height="360" src="http://www.youtube.com/embed/oHg5SJYRHA0?wmode=transparent" frameborder="0" allowfullscreen></iframe>

Yep, that’s all it takes!

Leave a Reply

2 Comments on "Youtube Embed Overlap Issue [Resolved]"

Notify of
avatar
Bethany

This worked for me. Thanks for sharing!

Keith

Great Bethany, glad I could help!

wpDiscuz