Html 如何在Div的后台添加项目目录中的视频

我有一个div，我想在背景中添加视频，就像图片一样，但我不知道如何做。这是我想添加视频的CSS

.page-section {
    width: 100%;
    min-height: 800px;
    padding: 50px 0;
    border-bottom: 2px solid #fff;
}

.page-section#intro {
   min-height: 400px;    
}

这是HTML部分

 <div class="page-section">
 </div>

---

请帮助我将css中的视频添加到Div的背景中。

@Hansal，我认为背景属性不接受视频作为有效URL。它们只能将位图、SVG图像、颜色和渐变作为值——通过将背景视频强制放在其他HTML元素后面，可以伪造背景视频的外观。有一个名为的属性负责页面上元素的“深度”

您可以在HTML5中尝试类似以下简单视频标签的内容：

 <video autoplay loop poster="foobar.jpg" id="bgvid">
 <source src="foobar.webm" type="video/webm">
 </video>

在这里，css的基本部分是将这个元素的z-index设置为-100，以确保它保持在背景中，从而允许其他元素位于它的顶部。您可以对相应的html元素尝试类似的方法。希望有帮助。

试试看

---

看一看。@Maddy我尝试了那个链接，但我无法做到。。请帮我一下视频url看起来可疑。确定它是正确的吗？好的。我明白你的意思。一个小的澄清，我如何设置@HansalMehta的高度，你可以像其他html元素一样设置视频标签的高度。在我提供的css中，我设置了最小宽度和最小高度。您可以修改它以满足您的需要。如果它对你有效，一定要将答案标记为已接受，这样其他人也会从中受益。谢谢，我加了最小高度70%；但是现在我的视频正在从底部缩小/剪切，这是我不想看到的..如何避免它并以70%的高度显示整个视频..请帮助提供任何相同的建议？

 <video autoplay loop poster="foobar.jpg" id="bgvid">
 <source src="foobar.webm" type="video/webm">
 </video>

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(foobar.jpg) no-repeat;
}

.page-section video{

position: fixed;
right: 0;
bottom: 0;
top:0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background-size: cover;

}