Search code examples
htmlcssiframeyoutubefixed

Youtube iframes sitting on top of fixed position element in Chrome

In chrome youtube iframes float on top of my fixed position header. I've tried setting z-indexes for both and its not happening.

Anybody know a fix for this?

Solution

  • When you embed a youtube iframe like this:

    <iframe width="560" height="315" src="http://www.youtube.com/embed/FSHDDteCBXw" frameborder="0" allowfullscreen></iframe>

    The default wmode will make the video overlay everything else, the solution is just add ?wmode=opaque in to the end of the src="http://www.youtube.com/embed/FSHDDteCBXw"

    like this:

    <iframe width="560" height="315" src="http://www.youtube.com/embed/FSHDDteCBXw?wmode=opaque" frameborder="0" allowfullscreen></iframe>