如何讓視頻完全占據屏幕寬度 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>