Page Menu floats under a youtube video

Uddhava · #1 Jun 9, 2009, 08:19 AM

Theme : Atahualpa 3.3.3
No modification were made in any css file.

The Page menu floats under a video that i have on my homepage. IT must be styled somewhere with z-index, but i dont know which item i need in the style.css file.

any suggestions where to look?
(see attached picture)

juggledad · #2 Jun 9, 2009, 10:10 AM

How did you add the video?
What's the url?

Uddhava · #3 Jun 9, 2009, 10:22 AM

This is just a standard youtube video embedded with their code. Nothing special.
I dont have this site online yet. Working locally at the moment.

juggledad · #4 Jun 9, 2009, 10:46 AM

if you post the code you used, I'll test it when I get a chance. There is probably a ,div..> that is overriding some css parameter

Uddhava · #5 Jun 9, 2009, 02:04 PM

juggledad · #6 Jun 9, 2009, 08:19 PM

try this, add the following to ATO->HTML/CSS Inserts->CSS Inserts

HTML Code:

table#layout {width: auto;}

juggledad · #7 Jun 10, 2009, 05:04 AM

Hmmm, never mind the last post, it will also effect the sidebars.

juggledad · #8 Jun 10, 2009, 08:17 AM

one way to deal with this is to set a minimum page width (set it to the width of the sidebars + the width of the video plus a little extra) this will prevent the middle colum from getting smaller than the video image

Uddhava · #9 Jun 10, 2009, 08:37 AM

I dont think i understand you completely.

What has the floating (z-index) of the menu to do with the width of the middle column?

My min. Width is set at 980. Max Width is set at 1250.
The middle column is 600px width at the minimum.
And the video is posted in the middle column and not in the sidebars.

juggledad · #10 Jun 10, 2009, 02:49 PM

Sorry, when I started testing, I was having a problem with the right sidebar overlaying the video clip. On a fresh install of Atahualpa, I can't get the video to overlay the menu. What styling do you have on the menu's?

Uddhava · #11 Jun 10, 2009, 03:04 PM

Like i said, i have the Standard 3.3.3 template. did not change any of the templates files.
Did play around with the settings of course, but as far as i know you cannot change the menu setting much.

What do u mean with styling exactly. The only thing i did was to move the menu bar below the image 'banner'.

I will get my local website hopefully tomorrow from work. Got fired so i cant get to it now.

juggledad · #12 Jun 14, 2009, 07:17 PM

Hi, you need to look at the generated source for this page. Locate the area where the video is and see if there is a z-index asssociated with any of that code.

Atahualpa assigns a z-index of 999 to the menu so it will show atop everything else, but the youtube code must also be doing that.

Uddhava · #13 Jun 16, 2009, 02:27 PM

Like i said before.. I am just including a youtube vide. Here is the code :

Quote:

Nothing special.

juggledad · #14 Jun 17, 2009, 06:04 AM

Can you try this, add teh following to your CSS Inserts

HTML Code:

ul.rMenu li:hover	{
z-index: 9999;		
}

Uddhava · #15 Jun 17, 2009, 05:17 PM

I tried your suggestion. No luck.. the menu still floats under the video...

juggledad · #16 Jun 18, 2009, 04:55 PM

do you have this online yet? In order to go further, I'll need to take a look at the source that is being generated.

Uddhava · #17 Jun 19, 2009, 04:40 AM

Yes i have it online at the moment.

http://test.harekrishna.nl/
The site is in dutch btw.

and in case you were wondering, if have 10 plugins running, which i disabled at the moment so they do not interfere.

And the HTML insert that you suggested is still active.

juggledad · #18 Jun 19, 2009, 04:54 AM

I see the site, but not the error, which page shows the error?

Uddhava · #19 Jun 19, 2009, 04:57 AM

What do you mean????
The mainpage is the page with the youtube video. That is what i mean..
You are not going to tell me that i am the only one with this error, only on my computer.....??????

I just asked a friend of mine to view the page and she also does not see the "error"....
Whats this???

I have run it on IE, Chrome, FF and all of them have the menu float UNDER the video....... Go figure??!!

juggledad · #20 Jun 19, 2009, 05:07 AM

Ah, this is a windows vrs mac issue. It runs fine in both Safari and fireFox on the Mac, but I see the problem in both IE8 and FireFox in windows (ahh the joy of compliance). Let me play a while

Uddhava · #21 Jun 19, 2009, 05:12 AM

Aha, you found something... I thought i was going crazy....
Better switch to Mac then ;-) hehehe

juggledad · #22 Jun 19, 2009, 02:31 PM

Flynn has provided the answer. There are two changes to the YouTube post you need to make

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="265" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/Hgilf4FTGAY&hl=en&fs=1&rel=0&color 1=0xe1600f&color2=0xfebd01" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="opaque">
<embed type="application/x-shockwave-flash" width="320" height="265" wmode="opaque" src="http://www.youtube.com/v/Hgilf4FTGAY&hl=en&fs=1&rel=0&color 1=0xe1600f&color2=0xfebd01" allowscriptaccess="always" allowfullscreen="true">
</embed></object>

add the parts in red to your post and give it a shot

Uddhava · #23 Jun 19, 2009, 03:28 PM

Wonderful!. That works...
It is a workaround i guess. When my users are posting youtube video's i really cant expect them to edit these codes all the time. So any sight on an another fix?
Or should we just tell google to change there embed code?

ys

juggledad · #24 Jun 19, 2009, 05:43 PM

I don't see a 'fix' happening because Atahualpa does not edit the posts. Since you can put HTML in a post there will never be a gaurentee that you can prevent strange things from happening. Add to this that different OS cause things to act different and different browsers act different, AND, I'll bet YouTube would WANT their video to be on top of anything else, I think you just going to have to live with this get around.

Of course, you could always contact Flynn and offer him $$$$$$$ to see if he could code a fix

Flynn · #25 Jun 19, 2009, 06:03 PM

You can put this at the bottom of functions.php, without causing blank lines. It should add the code to all flash inside post or page content

PHP Code:


			
<?php 
add_filter('the_content', 'add_opaque_to_all_flash');

function add_opaque_to_all_flash($string) {
    $string = str_ireplace('<embed type="application/x-shockwave-flash"', '<param name="wmode" value="opaque"><embed type="application/x-shockwave-flash" wmode="opaque"', $string);
    return $string;
}
?>