Javascript 自举视频巨型机

我正试图用一段视频来报道一个引导程序Jumbotron，但没有成功。这似乎是一件非常简单的事情，但我尝试的一切似乎都失败了

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

这显示了正在发生的事情：

.jumbotron{
位置：相对位置；
/*尝试设置高度。也不起作用*/
/*高度：200px*/
}
#视频背景{
位置：绝对位置；
底部：50%；
右：50%；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-1000；
溢出：隐藏；
}

你好，世界

看起来你有很多不必要的css在运行。首先，我肯定会定义jumbotron z索引，以便在背景中保留灰色填充

.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%;
}

---

如果这是您想要实现的目标，请告诉我。

看起来您有很多不必要的css。首先，我肯定会定义jumbotron z索引，以便在背景中保留灰色填充

.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%;
}

---

这是小提琴，让我知道这是否是你想要实现的。

因为

.jumbotron

有灰色背景，将视频背景设置为

z-index:-1000将使视频显示在灰色背景后面，因此不可见。此外，当制作视频背景覆盖时，父对象需要有
溢出：隐藏
，而不是视频本身

CSS:

这是一把工作小提琴：
因为
.jumbotron
有灰色背景，将视频背景设置为
z-index:-1000将使视频显示在灰色背景后面，因此不可见。此外，当制作视频背景覆盖时，父对象需要有
溢出：隐藏
，而不是视频本身

CSS:

这是一把小提琴：
是的，它似乎工作得很好！我猜关键是要设置jumbotron的z-指数？我建议不要使用位置固定来实现这一点。如果视频包装下面有内容，视频将跟随页面。相反，我将使用绝对位置并隐藏父溢出。这将允许您将包装的高度（.jumbotron）设置为您想要的高度，并且视频将充当背景封面。小提琴手：@JoshSanger同意了。我不得不把它换成一个位置：绝对是的，它似乎工作得很好！我猜关键是要设置jumbotron的z-指数？我建议不要使用位置固定来实现这一点。如果视频包装下面有内容，视频将跟随页面。相反，我将使用绝对位置并隐藏父溢出。这将允许您将包装的高度（.jumbotron）设置为您想要的高度，并且视频将充当背景封面。小提琴手：@JoshSanger同意了。我不得不把它改成绝对位置