accordion css z-index

Posted on 2011-10-18
Last Modified: 2012-05-12
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.
Question by:sorush
    LVL 8

    Expert Comment

    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


    Author Comment

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

    Accepted Solution

    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

    LVL 8

    Expert Comment

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now