• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

accordion css z-index

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.
  • 3
1 Solution
Jesse MatlockUX EngineerCommented:
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:

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>

Open in new window

sorushAuthor Commented:
I've copied and pasted the solution you suggested. But I still get the same effect that the video moves as the accordion moves.
Jesse MatlockUX EngineerCommented:
find this:

.kwicks li img {  margin-left:45px;}

Open in new window

and change it to this:

.kwicks li img,
.kwicks li object {  margin-left:45px;}

Open in new window

that resolves it :) It was a margin issue.. not a z-index issue ;)

you can also remove this:
#kwick_1 iframe { z-index: auto}

Open in new window

Jesse MatlockUX EngineerCommented:
glad everything worked well for you! It's looking great...

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now