accordion css z-index

Here is the site
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.
Who is Participating?
Jesse MatlockConnect With a Mentor UX 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:
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=";;color=00adef&amp;fullscreen=1" />
    <embed src=";;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:
glad everything worked well for you! It's looking great...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.