Question

致力于实现包含内容的全屏视频背景。

到目前为止，我已经能够无问题地使全屏视频正常工作。问题是我无法弄清楚如何在视频下添加内容。 Aka的视频应该停在下面：

目标：http://www.awesomescreenshot.com/0fa4atfpec

HTML：

<div class="container-fluid">

<div id='videoBG' class="row">

<video autoplay loop muted poster="screenshot.jpg" id="background">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

<p id='mainHeader'> Header Title </p>


</div>
</div>

<div class="container-fluid">
<div class='row'> 

<h1> Start of the second section below the video</h1>

</div>
</div>

CSS：

#background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Answer 1

您可以尝试使用视口大小这个快速测试对我有用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="seperator">...</li>
<li>4</li>
<li>5</li>
<li>6</li>

Answer 2

你可以给它一个100vh的上限，所以100％的视口高度。

{{1}}

正如我在这里使用的那样：https://jsfiddle.net/t2f1Lau6/1/

Answer 3

使视频容器div#videoBG占用100vh。这样，您可以在不推送以下部分的情况下影响#mainHeader等内部元素。另外，我添加了box-sizing: border-box＆amp;重置了margin s＆amp; padding以避免section之间出现不必要的差距。

嵌入代码段会破坏视口高度，因此请在外部进行检查：

External JSFiddle here

全屏视频背景，内容低于首屏

3 个答案: