编辑：

Question

我有一个使用bootstrap 3的布局。类似下面的代码。我想在容器后面创建视频背景的效果。如JSFiddle所示。但是，出于某种原因，视频出现在文本的前面，尽管我设置z-index这样就应该发生了。我应该更改什么才能让视频停留在后台？如果您调整视频大小，则可以看到它，以便文本显示在其上方。

<div class="homepage-hero-module fullheight">
    <div class="video-container">
        <div class="title-container">
            <div class="headline">
                <h1>Welcome to our Company</h1>
            </div>
            <div class="description">
                <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
            </div>
        </div>
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
            <source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video>
        <div class="poster hidden">
            <img src="http://www.videojs.com/img/poster.jpg" alt="">
        </div>
    </div>
</div>

由于

编辑：

不知道为什么，但是在我的小型PC上，JSFIddle上的视频没有显示，我只是在黑色背景上得到白色文字，而在我的大图像上，我将视频放在文本的顶部

Answer 1

这是我用于视频背景的代码。

HTML：

<body>
    <video autoplay loop poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid">
        <source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm">
        <source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
        <object>
            <embed src="//demosthenes.info/assets/videos/polina.webm" type="video/webm" allowfullscreen="true" allowscriptaccess="always" />
        </object>  
    </video>
    <div>
    <h4>Content</h4>
    </div>
</body>

CSS：

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
    background-size: cover;
    -moz-transition: 1s opacity;
    -o-transition: 1s opacity;
    -webkit-transition: 1s opacity;
    transition: 1s opacity;
}

h4{
  font-size: 50px;
  color: red;
}

工作小提琴：

JSfiddle

文字正确显示，所以我希望这可以解决你的问题。

自举容器后面的全屏视频

编辑：

1 个答案: