在堆栈上阅读some answers后,我设法为youtube视频制作了一个div叠加层。描述说这会让我在构造的div中添加尽可能多的div,这对我来说很有意义。

但是,我放入的第二个div降低了我的视频。我尝试调整位置和z-index,但这没有帮助。为什么只有一个div将视频下推?家长div不能确保他们都将鼠标悬停在视频上吗?

(顺便说一句,第二个div将在以后用jquery隐藏,以便第一个div可以通过单击打开它。)

我将视频叠加层包装在容器中:

    .outer-container {
        width:68%;
        height:575px;
        margin-left:2%;
        background-color:#97D3A3;
        display:inline-block;
}
.inner-container {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
}
.video-overlay {
    width:100%;
}
.video {
    width: 100%;
    height: 100%;
}

.overlaycontent {
    width:100%;
    height:100%;
    background-color:#fff;
    color:#000;
    position: relative;
    z-index: 98;
}

.overlayinfo {
        position: relative;
        z-index: 99;
        height: 0px;
        border-top: 4px solid #F1860B;
        width:100%;
        max-width:816px;
        text-align:center;
    }

    .overlayinfo img {
        margin:0px auto;
        width:53px;
    }


这是我的HTML:

<div class="outer-container">
        <div class="inner-container">
            <div class="video-overlay">

                <div class="overlayinfo">
                    <a href="#" class="infotrigger"><img src="#"></a>
                </div>
                <div class="overlaycontent">
                    Lorem ipsum dolor sit amet
                </div>


            </div>
                <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/6ttrZ11csfI?autoplay=1&controls=0&loop=1&playlist=6ttrZ11csfI&showinfo=0&modestbranding=1" frameborder="0"></iframe>
        </div>
    </div>


这是看完整图片的小提琴:
https://jsfiddle.net/boe5xLte/2/

最佳答案

您想要一个包装,该包装始终位于视频上方,但由于其自身(或子级)尺寸而不能以某种方式“移动”。

您已经将.inner-container设置为position: relative。现在,您必须放置.video-overlay的位置,以使其移出内容流。您可以通过设置以下内容来实现:

.video-overlay {
    /*to position it out of content-flow*/
    position: absolute;

    /*to span it to its parents borders*/
    top: 0; right: 0; bottom: 0; left: 0;

    /*to always let it be on top of your subsequent video container*/
    z-index: 1;
}


我相应地更新了您的小提琴:https://jsfiddle.net/boe5xLte/3/

可以调整toprightbottomleft的值,并类似于.video-overlay的此位置与.inner-container的相同位置之间的距离。

关于html - HTML视频覆盖部分压低了视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38347252/

10-12 12:18
查看更多