Some time back I wrote about how to float a div over Flash/Vimeo/YouTube etc. The method supplied in that post works fine for Flash based media but doesn’t work for the newer way to embed YouTube videos using an iframe. This post shows the solution so you can float elements over a YouTube iframe.
The problem
The Flash movie in the iframe has a default wmode of windowed which makes it float over the top of anything else, no matter what z-index is assigned to elements in the page.
The following screenshot illustrates the issue, where the absolutely positioned blue box should be positioned over the top of the video but is not. This could be a floating menu from the site’s navigation, for example, and is obscured behind the video.
The solution
It’s really easy. Simply add ?wmode=transparent to the end of the iframe’s src attribute. The HTML supplied by YouTube for the blank video above is as follows:
<iframe width="425" height="349" src="http://www.youtube.com/embed/8tPnX7OPo0Q" frameborder="0" allowfullscreen></iframe>
Add ?wmode=transparent and now it looks like this:
<iframe width="425" height="349" src="http://www.youtube.com/embed/8tPnX7OPo0Q?wmode=transparent" frameborder="0" allowfullscreen></iframe>
If you have other parameters as part of the iframe’s src (say for example you don’t want it to suggest other videos at the end YouTube will append ?rel=0) then you can add it to the end with &wmode=transparent like so:
<iframe width="425" height="349" src="http://www.youtube.com/embed/8tPnX7OPo0Q?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
I have read on a couple of forums that the wmode parameter had to be first for this to work but I didn’t have any issues making it second when I tried, so perhaps it used to cause issues and no longer does. To be on the safe side you could always make the wmode first like so:
<iframe width="425" height="349" src="http://www.youtube.com/embed/8tPnX7OPo0Q?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>
Now the absolutely positioned div in my screenshot example now floats over the video, as shown in the second screenshot below:
