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!

Did you like this post? Want to get more like it?

Website Redesign Course
Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
Bethany
Bethany
8 years ago

This worked for me. Thanks for sharing!

Keith
Keith
8 years ago
Reply to  Bethany

Great Bethany, glad I could help!

2
0
Would love your thoughts, please comment.x
()
x