Nerd Alert: Get your CSS menus in front of the new YouTube player

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="http://www.youtube.com/v/fDX7tevXO1E?fs=1&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param wmode="transparent"></param><embed src="http://www.youtube.com/v/fDX7tevXO1E?fs=1&amp;hl=en_US&amp;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="http://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.

3 Replies to “Nerd Alert: Get your CSS menus in front of the new YouTube player”

  1. Thank you, thank you, thank you! I've literally spent the last 5 hours trying to figure this out after reading a billion blog posts swearing up and down that the "old" way is the only way. I really hope this post gets bumped up in the search engines, I finally found it on page 3 of the SERP's for the search query "drop down menu behind youtube video wordpress css" – anyway did I mention THANK YOU!!!!!!

    1. 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 🙂

  2. Thank you! Literally searched everywhere trying to find out how to fix this in IE and this was all I needed!

Comments are closed.