全宽视频，顶部带有引导容器

Question

我有jsfiddle here

我想要一个带有文本的全宽视频，它位于引导容器中。

视频顶部的文字会像视频下方的文字一样回应。

    <div class="video-block block">
        <video src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4" autoplay muted loop ></video>
    </div>

    <div class="container text header-info">
        <div class="row">
            <div class="col-sm-6">
                <h1>Heading</h1>
                <h2>Sub Heading</h2>
            </div>
        </div>
    </div>

    <div class="container text">
        <div class="row">
            <div class="col-sm-6">
                <h1>Heading</h1>
                <h2>Sub Heading</h2>
            </div>
        </div>
    </div>

Answer 1

我设置min-height to top Header to 300px（css中的视频高度）并将其设置为relative position

我将视频块的绝对位置设置为前0

Fiddle

HTML ：

<div class="container text header-info">
    <div class="row">
        <div class="col-sm-6">
            <h1>Heading</h1>
            <h2>Sub Heading</h2>
        </div>
    </div>
</div>
<div class="video-block block">
    <img src="https://placeimg.com/1640/480/any">
</div>

<div class="container text text-2">
    <div class="row">
        <div class="col-sm-6">
            <h1>Heading</h1>
            <h2>Sub Heading</h2>
        </div>
    </div>
</div>

<强> CSS ：

.block{
   position: relative;
    z-index: -1; 
}

.video-block{
    height: 300px;
    overflow: hidden;
    position: absolute;
    top:0;    
}

video{
    height: auto;
    margin-top: -50px;
    width: 100%;
    z-index: -1;
}

.text{
    color: red;
    border: 1px solid red;
}

.header-info{
    top: 0;
    min-height:300px;        
}

.text-2{
    background: green;
}