在div中嵌入视频作为背景（bootstrap）

Question

在div中嵌入视频作为背景（bootstrap）

4

我正在尝试将视频添加到一个 div 中作为背景（.form-container），在过去，我对于全屏页面做了同样的事情，但在这种情况下，我只需要它在 div 中。问题是：不知道该如何做，我一直在调整宽度，但视频无法覆盖整个 div。

这是一个全屏视频，但显然不起作用。我试图使用 z-index 进行调整，但我对 twitter-bootstrap 如何处理 z-index 感到非常迷惑。

#main video {
    background: #222;
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transition: 1s opacity;
    opacity: 0.5; 
}

查看演示：http://codepen.io/wiitohzjeh/pen/vEgmEO?editors=110 当我尝试将宽度更改为100％并将max-height设置为250px以适应div时...

#main video {
    background: #222;
    position: fixed;
    width:100%;
    max-height: 250px;
    transition: 1s opacity;
    opacity: 0.5;
}

查看演示： http://codepen.io/wiitohzjeh/pen/LExyEK?editors=110

- wiitohzjeh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bariel R. · Accepted Answer

将您的视频容器设置为position: relative，然后将视频的位置更新为absolute，以使其“粘”在容器上。

#main .form-container {
    min-height: 250px;
    padding-bottom: 50px;
    margin-top: 50px;
    -moz-box-shadow:  0 2px 5px 0 #333;
    -webkit-box-shadow: 0 2px 5px 0 #333;
    box-shadow: 0 2px 5px 0 #333;
    position: relative;
    overflow: hidden;
}

#main video {
    background: #222;
    width:100%;
    background-size: cover;
    transition: 1s opacity;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
}

http://codepen.io/anon/pen/VYPbXj