Question

我正在尝试使用youtube视频在iframe上添加div。一切都在chrome，firefox和opera中有效，但在Internet Explorer中却没有。在IE中，div位于视频后面，在视频中显示为白色边框。

以下是问题的image

我正在使用的代码是：

HTML：

<!DOCTYPE html>
<html>
    <head> 
//css code 
     <style> 

    html, body{
        margin:0;
        padding:0;
    }

    .mainDiv{
        background-color:blue;
        height:350px;
        width:350px;
    }

    .video{
        position:absolute;
        width:200px;
        height:200px;
    }

    .front {
        position:absolute;
        width:100px;
        height:100px;
        left:120px;
        top:120px;
        background:#f00;
    }
  </style>
</head> 
<body>
    <div class="mainDiv">
        <iframe class="video" src="http://www.youtube.com/v/sItFnGYjhbY?modestbranding=1&version=3&autoplay=1&controls=0&disablekb=1&loop=1&showinfo=0&iv_load_policy=3&playlist=sItFnGYjhbY&wmode=transparent" frameborder="0">
            <p>Your browser does not support iframes.</p>
        </iframe>
        <div class="front"></div>
    </div>
</body> 
</html>

我尝试了各种解决方案，但我找到了，但任何人都可以使用。对此有何解决方案？

由于

Answer 1

尝试设置z-index以告知堆叠顺序：

.video{
    position:absolute;
    width:200px;
    height:200px;
    z-index:1;
}

.front {
    position:absolute;
    width:100px;
    height:100px;
    left:120px;
    top:120px;
    background:#f00;
    z-index:2;
}

More information about z-index

Answer 2

在IE中，插件是窗口元素。不可能在窗口元素前面渲染任何东西，而是渲染其他窗口元素。

解决方案：同时将div.front放入iframe，并使用z-index订购。

More information

在Internet Explorer上划分iframe和白色边框

2 个答案: