Navigation menu disappearing behind embedded YouTube videos on page
 

Hi -

My navigation menu was disappearing behind YouTube videos placed on the page in both Firefox and Chrome (Mac). I haven't looked at other browsers, but it probably was similar.

I added the following code to the ATO HTML/CSS Inserts to try to fix it:
ul.rMenu li:hover {
z-index: 99999; /* make sure this and any sub-menus that pop
appear above everything else on the page */
}

(The original code had the z-index at 999.)

This fixed the problem in Firefox but not in Chrome for pages with YouTube videos like this one:

http://www.bobrow.com/archicad-tutor...rites-palette/

Any ideas what I can do?

Eric

P.S. I also have a styling issue re my menus, that gets particularly noticeable when I have a submenu (see my menu ArchiCAD Tutorials > Videos submenu). There are a few pixels of extra whitespace around the colored menu background, creating a strange gap. I'm sure this is a simple CSS styling thing, but I haven't been able to figure it out. It looks ugly, and I'd love to clean this up.

The menu issue is because of some 8px left and right margins on the menus.

With regards to the embedded video how did you embed it? Have you tried a plugin or perhaps the Jetpack embed solution?

Thanks lmilesw for the tip about the margins. I sometimes get margins and padding mixed up - I really had intended to give a little padding to keep the text from getting too close the sides. Anyway, that styling issue is fixed now.

I'm still left with the main issue, the menu going behind the YouTube embed. I grabbed the embed code directly from YouTube, and placed it on the page using an HTML shortcode plugin - which simply protects HTML code from being mangled in the WP visual editor. So the "problem" is with the YouTube embed code - and I need to figure out how to make the YouTube embed flatten out against the background rather than floating up in a z-level type of layer.

So if anyone can help with this particular question, I'd greatly appreciate it!

Eric

Wouldnt that be the old Zindex thingy? Larry or juggledad will know the CSS, but I'd be guessing you give one of the nav selectors a z index value.

Thanks for your comment / suggestion.

I did set the z-index to 99999 for the menus (I mentioned this in my original post for this thread), which resolved the problem for Firefox and Safari, but not for Chrome. I don't know why Chrome is different. I haven't had a chance to test it on all the IE versions yet.

I think there is something one can do to embed video into the background, rather than on a z-index layer. I recall researching it a long time ago. I thought someone here might know about this approach, which might resolve the issue in Chrome, since I've set the z-index super high already.

Eric

OK, I found it! Eureka!

A good explanation of this problem, along with the simple solution, may be found on this page:
http://www.jenkaufman.com/youtube-if...er-layers-546/

Basically, one needs to add a command to make the iframe for the YouTube embed have wmode value of "transparent". One adds either "?wmode=transparent" or "&wmode=transparent" to the end of the embed code, depending on whether other parameter values are specified.

Eric

P.S. This thread may now be closed, as the issue is resolved. Yay!

The z-index is not the issue here although I wish it were that simple. This is a case where the only thing I could get to work cross browser is to use the old embed code which you can get off the youtube site and then add some wmode lines. Here is some code that will work although you will want to play around with the dimensions.

I'm using the new YouTube iframe-based embed code - the page I referenced has an explanation specifically for this context. The wmode value is being applied to the iframe, rather than to the Flash object.

I verified that this works in IE8, as well as all three Mac browsers I tested. I haven't checked IE 6, 7 or 9 yet - hopefully this works in all of them!

Eric

Good find. After you mentioned this I did a bit more searching on the JetPack embed method and found you can add parameters to that as well. The following code worked for me with JetPack enabled.