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

Question

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>

possible duplicate of [overlay opaque div over youtube iframe](http://stackoverflow.com/questions/3820325/overlay-opaque-div-over-youtube-iframe) — Cees Timmerman, Sep 10 '14 at 14:47
@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, Feb 11 '16 at 14:22

score 20 · Answer 1 · answered Jan 16 '13 at 21:41

20

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>

answered Jan 16 '13 at 21:41

Chris Filippou

377
3
11

2 years later but still I want to thank you, you just saved my life ;) – Valentincognito Nov 04 '15 at 01:35

score 6 · Answer 2 · edited Sep 10 '14 at 15:14

6

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 &.

edited Sep 10 '14 at 15:14

Cees Timmerman

17,623
11
91
124

answered Aug 10 '11 at 19:44

Paul Graffam

2,139
2
18
20

1

It seems to work in Safari, but it still doesn't work in Chrome. Anyone know why this is? Also, in Firefox, the video is reduced to thumbnail-size (I have no idea why), but the div shows over the video so at least that works. – Edvard Aug 10 '11 at 19:51
Not sure why it's not working in Chrome. For the firefox issue use actual values for width and height instead of percentages, e.g. ` – Paul Graffam Aug 10 '11 at 20:18
I want the video to fill the browser window though, not to have a specific size. Any idea on how to fix this? – Edvard Aug 10 '11 at 20:36
It's complicated with iframes. Youtube does give you the option to use the old embed code instead and that will allow you to set it up easier for full browser screen and width as well as for overlaying divs. – Paul Graffam Aug 10 '11 at 22:08
1

You may also need to add `&rel=0` to get it work, at least in Chrome. – Tom Aug 28 '13 at 16:24

score 2 · Answer 3 · answered Dec 31 '14 at 22:22

2

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.

answered Dec 31 '14 at 22:22

mary

21
1

score 2 · Answer 4 · answered Feb 16 '16 at 01:47

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>

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

4 Answers4

Linked