Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Navigation menu disappearing behind embedded YouTube videos on page


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old May 24, 2011, 04:41 PM
Eric Bobrow
 
70 posts · Jan 2009
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.
  #2  
Old May 24, 2011, 07:29 PM
lmilesw's Avatar
lmilesw
 
10,085 posts · Jul 2009
Central New York State USA
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?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old May 24, 2011, 10:03 PM
Eric Bobrow
 
70 posts · Jan 2009
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
  #4  
Old May 24, 2011, 10:35 PM
Jam's Avatar
Jam
 
1,067 posts · Mar 2011
Perth, Western Australia
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.
  #5  
Old May 24, 2011, 11:20 PM
Eric Bobrow
 
70 posts · Jan 2009
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
  #6  
Old May 24, 2011, 11:50 PM
lmilesw's Avatar
lmilesw
 
10,085 posts · Jul 2009
Central New York State USA
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.
HTML Code:
<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/QtCv_4m3BHY?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="wmode" value="opaque"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QtCv_4m3BHY?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed></object>
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; May 24, 2011 at 11:54 PM.
  #7  
Old May 25, 2011, 12:03 AM
Eric Bobrow
 
70 posts · Jan 2009
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
__________________
Eric Bobrow - Creator of ArchiCAD Tutorials and ArchiCAD Training materials:
The Best Practices Course and MasterTemplate

Last edited by Eric Bobrow; May 25, 2011 at 12:10 AM. Reason: adding signature
  #8  
Old May 24, 2011, 11:46 PM
Eric Bobrow
 
70 posts · Jan 2009
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 "&amp;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!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
BUG: Menu and right drop out menus disappearing when above headline of page extremecarver New Versions, & Updating 8 May 10, 2011 04:04 AM
[SOLVED] Bold page menu disappearing after visited bswb97 Page & Category Menu Bars 2 Mar 1, 2011 02:20 PM
Page Menu floats under a youtube video Uddhava Page & Category Menu Bars 34 Jan 28, 2010 08:02 PM
Page Menu Drop down dissapears behind Flash, Youtube video aahuganda Page & Category Menu Bars 1 Oct 31, 2009 05:08 AM
PollDaddy plugin - embedded pop-up survey, but page menu bar lays on top Lucky_Charm4 Plugins & Atahualpa 0 Oct 20, 2009 11:46 AM


All times are GMT -6. The time now is 09:50 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.