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!