引导视频大屏幕答案

【问题标题】：Bootstrap video jumbotron引导视频大屏幕
【发布时间】：2016-04-10 00:48:57
【问题描述】：

我正在尝试制作一个视频来介绍引导 Jumbotron，但没有成功。这似乎是一件非常简单的事情，但我尝试的一切似乎都失败了。

我尝试了here 发布的解决方案，但没有成功。我还尝试将视频的位置设置为绝对位置，并将所有边设置为 0，但这似乎也不起作用。我做错了什么？

这显示了正在发生的事情： https://jsfiddle.net/kae4q601/

.jumbotron{
  position: relative;
  
  /* Tried setting the height. Didnt work either */
  /* height: 200px; */
}

#video-background { 
  position: absolute;
  bottom: 50%; 
  right: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="jumbotron">
  <video id="video-background" preload muted autoplay loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
  <div class="container">
    Hello World
  </div>
</div>

【问题讨论】：

标签： javascript html css twitter-bootstrap video

【解决方案1】：

看起来你有很多不必要的 CSS。首先，我肯定会定义 jumbotron z-index 以将灰色填充保留在背景中。

.jumbotron{
  position: relative;
  z-index:-101;
}

接下来为视频背景添加一些更简洁的代码，如下所示：

    #video-background { 
      position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100;
        width:100%;
}

这是小提琴https://jsfiddle.net/kae4q601/5/ 让我知道这是否是您想要实现的目标。

【讨论】：

是的，这似乎工作得很好！我猜关键是设置jumbotron的z-index？
我建议不要使用 position fixed 来实现这一点。如果视频包装器下方有内容，则视频将跟随页面。相反，我会使用绝对位置并隐藏父溢出。这将允许您将包装器 (.jumbotron) 的高度设置为您想要的任何值，并且视频将充当背景封面。小提琴：jsfiddle.net/kae4q601/15
@JoshSanger 同意。我不得不将其更改为位置：绝对

【解决方案2】：

由于.jumbotron 有灰色背景，将视频背景设置为z-index: -1000; 将使视频显示在灰色背景后面，因此不可见。另外，制作视频背景封面时，父级需要有overflow:hidden，而不是视频本身。

CSS：

.jumbotron{
   position: relative;
   overflow: hidden;
   height: 200px;
}

.container {
  position: relative;
  color: #ffffff;
  z-index: 2; /* Show content above video */
}

#video-background{ 
  position: absolute;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}

这是一个有效的小提琴：https://jsfiddle.net/kae4q601/15/

【讨论】：