html - 是否可以让 div 的背景成为具有“包含”属性的 HTML5 视频？

Question

我希望将 div 的背景设置为 HTML5 视频/webm，我想知道它是否有可能具有“包含”属性并保持其纵横比？我不想让视频覆盖整个屏幕，而是让 div 延伸 100% 的宽度和设定的高度。我想要隐藏超出高度阈值的视频部分？

这可能吗？提前致谢。

Answer 1

给你：

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

它不是一个完整的解决方案，因为我还没有找到使视频元素尊重其包含 div 的高度的方法。它似乎也消耗了它下面的所有 div，我现在正在努力。

Answer 2

/*===== Start HTML 5 Video DIV Background ===*/

.full-video {
  background: url(image) no-repeat 0 0;
  background-attachment: fixed;
  padding: 0px 0px 0px 0px;
  color: #6a6a6a;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-cover {
  position: relative;
  height: 850px;
  overflow: hidden;
}

.video-cover video {
  object-fit: cover;
  background-image: url(image) no-repeat 0 0;
}

<div class="video-cover">
  <video class="video" muted autoplay loop playsinline poster="video/image">
    <source src="video/xxx.mp4"  type="video/mp4">              
    <source src="video/xxx.webm" type="video/webm">
    <source src="video/xxx.ogg"  type="video/ogg">
    Your browser doesn't support HTML5 video tag.
  </video>
</div>