Как показать div поверх видео на YouTube (z-index)? - PullRequest
Новая
       48

Как показать div поверх видео на YouTube (z-index)?

12 голосов
/ 10 августа 2011

Я хочу показать div на видео YouTube, но не могу заставить его работать.Я знаю, что если вы установите wmode на transparent или opaque, это должно работать, но я видел эту работу только при использовании тега <embed> или <object>.YouTube теперь встраивает видео в <iframe>, поэтому, когда я его попробовал, это не сработало.Вот как выглядит мой код. 

    <!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 ]

19 голосов
/ 17 января 2013

Я добавил? Wmode = opaque в конце "ссылки" для встраивания, и это сработало для меня.

http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque работал на меня. так что в полном объеме это 

 <iframe width="250" height="188" src="http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque" frameborder="0" allowfullscreen></iframe>
6 голосов
/ 10 августа 2011

Очевидно, что при использовании iframe он автоматически устанавливает wmode в оконный режим, поэтому попробуйте установить wmode флеш-плеера напрямую, изменив iframe src следующим образом:

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

Как вы можете видетьЯ добавил &wmode=opaque в конец списка параметров.Это должно позволить вам теперь наложить div.Параметры также начинаются с ?, а не &.

1 голос
/ 01 января 2015

После rel = 0 (у меня уже было это) я добавил это & ​​modestbranding = 1 & wmode = opaque ", и теперь это работает правильно для всех основных браузеров, включая IE11.0. Так что это работает для меня. Большое спасибо и с Новым 2015 годом! всем членам этого сообщества.

0 голосов
/ 16 февраля 2016

Попробуйте этот код: 

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