Image via Wikipedia
I’ve got a website that displays iframe embedded Youtube videos and uses Lightbox to load images up, however, the images load behind the Youtube video. I’ve come across this before on other websites but not on any of my own. I fiddled around with z-indexes for a bit but they didn’t do anything. Turns out, it’s actually a very easy fix. Just add ?wmode=opaque to the src address in the iframe.
For example:
<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/hTCAeGIBaxw” frameborder=”0″ allowfullscreen></iframe>
Becomes:
<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/hTCAeGIBaxw?wmode=opaque” frameborder=”0″ allowfullscreen></iframe>
Super easy!
I also came across this video by 360 Creations explaining it:
From what I read, ?wmode=transparent should work as well, but it sounds like it is a bit slower to render as it has to render transparency, opaque renders solid. It would be great if Youtube included this in the src address by default! It would make it so much easier for everyone.
