1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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:
    734
    Likes Received:
    37
    Trophy Points:
    0
    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,287
    Likes Received:
    364
    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:
    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,287
    Likes Received:
    364
    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:
    try also with:

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

    pein87 New Member

    Joined:
    Aug 6, 2010
    Messages:
    173
    Likes Received:
    47
    Trophy Points:
    0
    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