html5和css3视频背景

我想学习如何把一个html的背景视频，就像它在做

我的容器宽度是1000px

视频的大小和资源应该是多少才能更快地加载并达到完美的大小？顶部和底部没有黑色

还有，有人能帮助html5和css3编码吗？你能告诉我密码吗

---

我想按照你的指示，自学如何在背景中重现视频

您可以使用视频jQuery插件，如中的插件，以便使用javascript制作视频背景

以下是我的代码：

<video  src="http://media.w3.org/2010/05/sintel/trailer.mp4" autoplay loop></video>

基本上，它所做的是将视频定位为a）在比屏幕大的内容下（z-index:-1）和b）

Object fit

允许我们改变视频对尺寸过大或过小的反应方式。我之所以选择封面，是因为我认为剪掉一些视频并不重要<代码>填充将导致它占用空间，忽略纵横比。Contain是默认值。这种方法确实消除了黑条

但是，您还应该确保在多种设备和尺寸上测试视频背景。解决黑条问题的更高级方法是使用javascript计算纵横比，然后将适当的源代码放入DOM中。媒体查询也可能有帮助

video {
  display: block;
  height: 150%;
  left: 0;
  object-fit: cover;
  position: fixed;
  top: -25%;
  width: 100%;
  z-index: -1;
}