如何让视频完全占据屏幕宽度 html？

Question

所以，我试图让视频占据整个屏幕，但多次失败。 解决它的最佳尝试是使用以下代码：

 video { position: absolute; top: 0; left: 0; z-index: -1; max-height: 100%; min-width: 100%; }

 <video autoplay="" loop="" muted> <source src="highway-loop.mp4" type="video/mp4" /> </video>

但是，也有一个小边框，它不是像这样的全屏 https://nothing-to-see-he.re/57mz2UVuG知道我该如何解决它吗？

Answer 1

使用

video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  min-width: 100vw;
  min-height: 100vh;
}

因为max-height不允许宽度增加。

Answer 2

 video { position: absolute; top: 0; left: 0; z-index: 1; max-height: 100%; min-width: 100%; }

 <video autoplay="" loop="" muted> <source src="https://i.imgur.com/9f6mEiR.mp4" type="video/mp4" /> </video>

首先你有 z-index:-1（这使得你的视频 go 在屏幕/元素后面）我把它改成了 z-index:1。

单击“运行此代码”按钮可以看到它现在可以运行了。 默认情况下，它还采用它所在的 div 的完整宽度和高度。 由于在当前的示例中没有任何东西阻止它，所以它确实是全尺寸的。 单击“整页”进行确认。

第三， https://nothing-to-see-he.re/57mz2UVuG看起来边框来自视频本身，而不是来自 html/css。

Answer 3

2 个月前我遇到了同样的问题。 但我想通了:D

Index.html

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

...

<video autoplay muted loop id="video">
    <source src="video2.mp4" type="video/mp4">
</video>

...

样式.css

body {
    margin: 0;
    padding: 0;
    background: #333333;
  }

  #video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }

我希望这对你有帮助:D

Answer 4

将您的视频包装在一个容器中。 做这样的事情。

 .container { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100vh; background-color: coral; } video { position: relative; width: 100%; height: 100%; }

 <div class="container"> <video autoplay="" loop="" muted> <source src="https://i.imgur.com/9f6mEiR.mp4" type="video/mp4" /> </video> </div>