Javascript chrome中未显示视频背景

这是我体内的html
此代码用于覆盖div并在其顶部覆盖的视频。我可能需要帮助，因为视频没有出现在chrome中。我试过使用webm。文件和ogv，但它不工作。 非常感谢您的帮助

 <section>
<div class="jumbotron jumbotron-fluid" id="hero">
  <div class="container">

    <h3 class="hero-subtitle">Lorem Ipsum</h1>
    <p class="hero-content">The main content goes here </p>
        <br>
        <h6 class="hero-excerpt">subtitle </h6>
  </div>
</div>
</section>

不能直接将视频文件用作背景图像。在

background

样式中使用时，将设置为

background image

属性。因此，该属性的url需要指向图像，而不是视频文件

跨浏览器解决方案

如果你想让你的视频作为某个元素的背景播放，你需要把它和你想要的内容放在一个容器里。覆盖它并设置适当的：

.container{
位置：相对位置；
宽度：320px；
高度：180像素；
}
.集装箱视频{
位置：绝对位置；
宽度：320px；
高度：180像素；
左：0px；
顶部：0px；
z指数：1；
}
.容器.内容{
位置：相对位置；
宽度：320px；
高度：180像素；
z指数：2；
背景色：rgba（0,0,0,0.7）；
颜色：白色；
线高：180px；
文本对齐：居中；
}

一些内容

此代码中没有对视频的引用。。。如何调用视频？我没有包含视频，因为NDA，任何视频都可以。这是无效的html:

Lorem Ipsum

（错误的结束标记）-不确定这是否导致问题，但可能应该得到修复。

#hero {
min-height: 70vh;
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.85),
rgba(0, 0, 0, 0.45)
),
/* bottom, image */
url('background_video.mp4');

background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
.hero-subtitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.2;
}
.hero-content{
font-size: 1.25rem;
font-weight: 300;
}
.hero-excerpt{
font-size: 1rem;
font-weight: 300;
}
}

url('background_video.mp4')