z-index Problem With Embed Code From YouTube

Discussion in 'Web Design, HTML And CSS' started by coderzone, Sep 14, 2010.

  1. coderzone

    coderzone Super Moderator

    Joined:
    Jul 25, 2004
    Messages:
    736
    Likes Received:
    38
    Trophy Points:
    28
    I am trying to embed a video from YouTube but I have some layers which just does not get above the YouTube Player or in other words I could not make the YouTube video go behind.

    I have tried almost everything like setting z-index of my layers higher than YouTube Videos and vice versa but I see that it has no effect on the final layout.

    Any idea how to get html layer to appear above the player?
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Yes also had this same issue and found a solution to it.

    You have to add the following to your object code

    HTML:
    <param name="wmode" value="opaque" />
    And following to your embed code

    HTML:
    wmode="opaque" 
    And it should work fine on all browsers as expected.
     
  3. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    http://zontek.zzl.org
    try putting in a customized div rather than putting tthings on directly to embbed thing
    <div style:"z-index:10">
    you codingggg
    </div>
     
  4. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Code:
    <div style:"z-index:10">
    Should be
    Code:
    <div style="z-index:10">
     
  5. Max2010

    Max2010 New Member

    Joined:
    Oct 14, 2010
    Messages:
    17
    Likes Received:
    1
    Trophy Points:
    0
    Home Page:
    http://www.logoarena.com
    try also with:

    <param name="wmode" value="transparent" />
     
  6. pein87

    pein87 Active Member

    Joined:
    Aug 6, 2010
    Messages:
    173
    Likes Received:
    47
    Trophy Points:
    28
    Occupation:
    Web Dev
    Location:
    Limbo
    Flash will always have the highest z-index on the page so you cannot set an html element to be over a flash object(swf). Its one of the reasons why they praise html 5's video tag because its not the case in html 5.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice