Question

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

然而，我放在那里的第二个div是推下我的视频。我尝试使用position和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/

Answer 1

你想要一个总是在视频上的包装器，但由于它自己的（或它的子）尺寸，它不会以某种方式“移动”它。

您已将.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/

top，right，bottom和left值可以调整，并且类似于.video-overlay的此网站与同一网站之间的距离.inner-container。

HTML视频叠加部分推送视频

1 个答案: