How to show a div over a Youtube video (z-index)?

12
votes

I want to show a div over a YouTube video but can't get it to work. I know that if you set the wmode to transparent or opaque it should work, but I've only seen this work when the <embed> or <object> tag is used. YouTube now embeds the video in an <iframe> so when I tried it, it didn't work. Here's what my code looks like.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">@import "reset.css";</style> 
        <style type="text/css">
            body {
            background:#000;
            font:62.5%/240% Helvetica, Arial, sans-serif;
            overflow:hidden; /* To avoid showing a scrollbar */
            }
            div {
            background:#f00;
            position:absolute;
            min-width:100%;
            min-height:100px;
            z-index:99; 
            }
        </style>
    </head>
    <body>
        <div></div>
        <iframe width="100%" height="100%" src="http://www.youtube.com/v/8lVJV--SrGg&loop=1&autoplay=1&autohide=1&hd=1&modestbranding=1" frameborder="0"  allowfullscreen></iframe>
    </body>
    </html>
4
flashvideoyoutubez-index
possible duplicate of overlay opaque div over youtube iframe – Cees Timmerman
@user1724434, you need to say what is your full issue. Tell us what you're trying to achieve and which of the suggestions below you're tried. – VC.One

4 Answers

19
votes

I added the ?wmode=opaque at the end of the embed "link" and it worked for me.

http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque worked for me. so in full it is

 <iframe width="250" height="188" src="http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque" frameborder="0" allowfullscreen></iframe>
6
votes

Apparently when using an iframe it sets the wmode automatically to windowed so try setting the flash player's wmode directly by modifying the iframe src like so:

src="http://www.youtube.com/v/8lVJV--SrGg?loop=1&autoplay=1&autohide=1&hd=1&modestbranding=1&wmode=opaque"

As you can see I added &wmode=opaque to the end of the parameter list. That should enable you to now overlay a div. Parameters also start with a ?, not a &.

2
votes

After rel=0 (I already had this) I added this &modestbranding=1&wmode=opaque" and now this work properly for all major browsers, included IE11.0. So, this is worked for me. Thanks a lot and Happy New Year 2015! to all members of this community.

0
votes

Try this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">@import "reset.css";</style> 
        <style type="text/css">
            body {
            background:#000;
            font:62.5%/240% Helvetica, Arial, sans-serif;
            overflow:hidden; /* To avoid showing a scrollbar */
            }
            div {
            background:#f00;
            position:absolute;
            min-width:100%;
            min-height:100px;
            z-index:99; 
            }
            iframe {
            position:absolute;
            min-width:100%;
            min-height:100%;
            }
        </style>
    </head>
    <body>
        <div></div>
        <iframe src="http://www.youtube.com/v/8lVJV--SrGg?loop=1" frameborder="0"></iframe>
    </body>
    </html>