Question

在我的网站wordpress中，我正在使用插件“高级响应视频嵌入器”来合并视频。这很酷，但我有一点问题，因为我在网站上添加了一个访问者进入网站时出现的广告页面。碰巧在firefox和opera中，广告位于插件嵌入的视频前面，所以很酷。但是，在chrome，safari和Internet Explorer中，视频嵌入显示在广告的正面。

任何人都知道如何解决这个问题？这是插件css的问题吗？

.arve-thumbsize {
    width: <?php echo $thumb_width_px; ?>;
    height: <?php echo $thumb_height_px; ?>;
}
.arve-embed-container {
    margin-left: -5px;
    margin-top: 10px;
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    margin-bottom: 10px;
}
* html .arve-embed-container {
    margin-bottom: 45px;
    margin-bot\tom: 0;
}
.arce-embed-container div,
.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 97%;
    height: 98%;
}
.arve-thumb-wrapper {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
}
.arve-nothumb-link {
    display: block;
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.arve-thumb-thumb {
    z-index: 15;
}
.arve-thumb-play {
    position: absolute;
    z-index: 20;
    opacity: 0.7;
    filter: alpha(opacity=70);
    width: 40px;
    height: 37px;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -19px;
}
.arve-hidden {
    display: none;
}
.arve-hidden-obj {
    width: 100%;
    height: 100%;
}

由于它在某些浏览器中有效，我真的不知道它可能是什么。

提前致谢！

Answer 1

删除z-index：

.arve-embed-container iframe, .arve-embed-container object, .arve-embed-container embed

我使用Firebug来查明罪魁祸首。由于我的知识，我猜可能这可能是一个z-index问题。然后我检查了所有div，看看他们是否有z-index。我发现上面发布的div上有z-index 5000的div。我使用z-index: 0!important;覆盖了它。

插件Wordpress高级响应式视频嵌入器 - 在某些浏览器中溢出效果不佳

1 个答案: