Page Menu floats under a youtube video
 

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)

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

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.

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

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/Hgilf4FTGAY&hl=nl&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Hgilf4FTGAY&hl=nl&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

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

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

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

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.

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?

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.

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.

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

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

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

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.

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.

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

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??!!

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

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

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&amp;hl=en&amp;fs=1&amp;rel=0&amp;color 1=0xe1600f&amp;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&amp;hl=en&amp;fs=1&amp;rel=0&amp;color 1=0xe1600f&amp;color2=0xfebd01" allowscriptaccess="always" allowfullscreen="true">
</embed></object>

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

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

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 :)

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