In an effort to keep up with HTML5, just like Vimeo, YouTube has started to implement <iframe>s for their <embed> codes as a means of displaying their videos. By doing so, it allows a wider variety of devices to view an embedded YouTube (or Vimeo) video.
However, for all you developers out there, this means the old-school way of fixing a CSS-only drop-down menu from going behind an embed code no longer works. Previously (and this still works with the old code), you had to use z-index and wmode=”transparent” to make sure your menus show in front of the video.
The Previous Way
Old embed code:
<object width="640" height="390"><param name="movie" value="https://www.youtube.com/v/fDX7tevXO1E?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param wmode="transparent"></param><embed src="https://www.youtube.com/v/fDX7tevXO1E?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="640" height="390"></embed></object>
Emphasis added. What is in red above was necessary to put CSS menu drop-downs in front of the YouTube player.
The New Way
To get your videos behind the menu as they’re meant to be, the “wmode” is now part of the query string added to the end of the source of the YouTube video:
<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/fDX7tevXO1E?wmode=transparent" frameborder="0" allowfullscreen></iframe>
This will fix your issue.
It should also be noted that, so far, this has only been noticed in Chrome and IE. Firefox appears to behave as normal.
You are so welcome!!! Glad we could help 🙂
If you have any other random geeky questions like this – leave us a comment, add something on our Get Satisfaction page (www.getsatisfaction.com/schipul) or shoot us a contact form. The more time you save on this stuff, the more time for your own awesome project work – and we dig that 🙂