首页 文章

如何在Youtube视频（z-index）上显示div？

提问于
浏览 次
12

我想在YouTube视频上显示div，但无法让它工作 . 我知道如果你将 wmode 设置为 transparent 或 opaque 它应该可以工作，但是我在使用 <embed> 或 <object> 标签时才看到这个工作 . YouTube现在将视频嵌入到 <iframe> 中，所以当我尝试它时，它并没有't work. Here' s我的代码看起来像什么 .

<!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>
flash video youtube z-index

4 回答

  • 19

    我在嵌入“链接”的末尾添加了？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>
    回复于
  • 0

    显然当使用iframe时，它会自动将wmode设置为窗口，因此请尝试通过修改iframe src来直接设置flash播放器的wmode：

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

    如您所见，我将 &wmode=opaque 添加到参数列表的末尾 . 这应该使您现在可以覆盖div . 参数也以 ? 开头，而不是 & .

    回复于
  • 1

    在rel = 0之后（我已经有了这个）我添加了这个＆modestbranding = 1＆wmode = opaque“现在这适用于所有主流浏览器，包括IE11.0 . 所以，这对我有用 . 非常感谢2015年新年快乐！对这个社区的所有成员 .

    回复于
  • 6

    试试这段代码：

    <!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>
    回复于

相关问题