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

Question

我需要在我的 page 中放一段视频作为完整背景.视频必须准确放置在当前图像所在的位置。

图像在我的 div 中:

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

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

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

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

谢谢

Answer 1

前几天我只是在测试这个。这是我用来让我的视频全屏显示的方法 top/left/right/bottom 我只是把它强制到边缘但是这个下面的 def 工作。

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

}

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

但这应该让你继续。显然只需更改父 div 的 #vid。 Z-index 所以它移动到我在页面上的任何内容后面，所以你可以随心所欲地使用它。