asked on

accordion css z-index

Hi.
Here is the site www.sadafnazari.com.
When we select the other accordion buttons the video over floats the first button. We don't want that to happen we want the embedded video to go underneath the first button.

Jesse Matlock

If you are loading the video using a plugin or by adding the object/embed code to you page, try the following:

1. Add the following parameter to the OBJECT tag:
<param name="wmode" value="transparent">

2. Add the following parameter to the EMBED tag:
wmode="transparent"

I checked your source, and it looks like you are using a standard iFrame to load the video.. which is not the best way to do it. There are a number of ways to play videos using embed codes, etc that will pose less problems.

You can try this embed code for your video is:

<object width="WIDTH" height="HEIGHT">
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" /> 
	<param name="wmode" value="transparent" />
    <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=30707032?&amp;server=vimeo.com&amp;color=00adef&amp;fullscreen=1" />
    <embed src="http://vimeo.com/moogaloop.swf?clip_id=30707032?&amp;server=vimeo.com&amp;color=00adef&amp;fullscreen=1"
        type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="WIDTH" height="HEIGHT" wmode="transparent"></embed>
</object>

Open in new window

sorush

ASKER

I've copied and pasted the solution you suggested. But I still get the same effect that the video moves as the accordion moves.

ASKER CERTIFIED SOLUTION

Jesse Matlock

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jesse Matlock

@sorush,
glad everything worked well for you! It's looking great...