css - 在我的页面中集成视频全屏的最佳解决方案

Question

我需要将视频作为完整背景放在我的页面中。视频必须准确地放置在图像所在的位置。

图像在我的 div 内：

<div class="main">
    <img src="img/lapedrera1.jpg" alt="architecture" class="homeimg">
</div><!-- /main -->

.main  {
z-index:1;
position:fixed;
}

我需要在那里放一个视频，替换img。

我想从右脚开始，你建议我怎么做？哪个是最好的方法？

谢谢

Answer 1

前几天我只是在测试这个。这是我用来让我的视频全屏顶部/左侧/右侧/底部的内容，我只是将其强制放置到边缘，但下面的 def 有效。

#vid{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
  width:100%;
  height:100%;

}

我还使用 CSS 重置，因此所有浏览器上的所有值都相同。因此，如果您添加重置，您可以删除（或保留）顶部/左侧/右侧/底部值等。

但这应该让你继续前进。显然，只需更改您父 div 的#vid。Z-index 是它移动到我在页面上的任何内容之后，因此您可以随意使用它。