我想在我的網站上創建一個全屏視頻背景，理想情況下只使用HTML和CSS。我還需要將視頻背景粘貼到頁面的頂部，因此用戶的第一個視圖完全被視頻覆蓋，然後他們可以向下滾動並移動視頻。全屏HTML5無JS視頻背景

我需要視頻響應並保持寬高比。但是，爲了避免黑條，我希望視頻能夠填充其中任何尺寸（寬度或高度）最小的100％，然後將視頻溢出其他尺寸。

這是我的解決方案至今...

<div class="container-fluid adjustedHeight"> 
    <div class="video-container"> 
    <div class="row"> 
     <div class="col-md-12"></div> 
    </div> 
    <div class="row Page1"> 
     <div class="col-md-6 button1"> 
     <button type="button" class="btn btn-primary btn-lg outline">Pre-Order</button> 
     </div> 
     <div class="col-md-6 button2"> 
     <button type="button" class="btn btn-primary btn-lg outline">About Us</button> 
     </div> 
    </div> 
    <video autoplay loop class="fillWidth"> 
     <source src="Images/Comp 2.mp4" type="video/mp4" /> 
     Your browser does not support the video tag. I suggest you upgrade your browser.</video> 
    <div class="poster hidden"> <img src="http://www.videojs.com/img/poster.jpg" alt=""> </div> 
    </div> 
</div>

CSS：

.video-container { 
    position: relative; 
    bottom: 0%; 
    left: -15px; 
    height: 100% !important; 
    width: 100vw; 
    overflow: hidden; 
    background: #000; 
    display: block !important; 
} 

.video-container video { 
    position: absolute; 
    z-index: 0; 
    bottom: 0; 
} 

.video-container video.fillWidth { 
    min-width: 100%; 
    min-height: 100%; 
}

它適用於寬度，但我得到的黑條，如果高度過大，視頻，即寬度不會溢出。我如何定義這個以確保寬度和高度至少100％填充？我認爲min-height和min-width屬性會這樣做，但這會將高度和寬度都調整到100％以上，並且在調整大小時，視頻不會縮放，只會截斷更多視頻的寬度（並且不會保留視頻中心）。而如果我只使用.video-container video.fillWidth CSS屬性中的寬度和高度定義，我確實獲得了視頻集中，但是我得到了黑條。

這是一個JSFiddle它目前顯示當高寬比與視口比率不同時，黑條出現在上方和下方（也在左側和右側，但很難看到）。

注意：我使用引導程序3，我的adjustedheight屬性允許導航欄的空間。

編輯：

要回答的關閉請求，該鏈接的問題已經回答了需要JS，我不想使用。

感謝您的幫助，我真的很想要得到一項決議，這是似乎基於什麼我的代碼應該這樣做是有道理的不 - 不知道我要去的地方錯了...

有沒有人有任何想法？由於我JSFiddle一切似乎已經安靜...

來源

2016-01-22 George Edwards

嘗試把你的'視頻container'身體標記和使用 * { 保證金= 0; padding = 0; } – Lakshya

[可以將HTML5 作爲全屏幕背景顯示嗎？]（http://stackoverflow.com/questions/3899865/can-you-display-html5-video-as-a-full-screen-背景） – Rob

@Rob這些似乎主要包括JS？ –

我不確定我是否完全滿足您的要求，但在我看來您正在尋找object-fit屬性，其值爲cover。

從MDN：

蓋
被替換的內容的尺寸卻使元件的整個內容框，以保持其高寬比：其具體的對象大小是解決作爲對元件的蓋約束使用寬度和高度。

html, 
 
body, 
 
div.video-container, 
 
video 
 
{ 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
video{ 
 
    height: 100%; 
 
    width: 100%; 
 
    object-fit : cover; 
 
} 
 

 
.video-container { 
 
    overflow: hidden; 
 
    background: #000; 
 
    display: block !important; 
 
    position: relative; 
 
} 
 

 
.video-container video { 
 
    position: absolute; 
 
    z-index: 0; 
 
    bottom: 0; 
 
} 
 

 
.title-container { 
 
    z-index: 10; 
 
    color: #FFF; 
 
    position: absolute; 
 
} 
 

 
.adjustedHeight { 
 
    height: calc(100% - 77px); 
 
    width: 100%; 
 
    padding: 0; 
 
}

<div class="container-fluid adjustedHeight"> 
 
    <div class="video-container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"></div> 
 
    </div> 
 
    <div class="row Page1"> 
 
    </div> 
 
    <video autoplay loop class="fillWidth"> 
 
     <source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" /> Your browser does not support the video tag. I suggest you upgrade your browser.</video> 
 
    <div class="poster hidden"> <img src="http://www.videojs.com/img/poster.jpg" alt=""> </div> 
 
    </div> 
 
</div>

來源

2016-01-24 11:00:15 Kaiido

我相信min-width和min-height均設定爲100％，是要走的正確方法，但所有家長的height S還必須按順序設置爲100％爲它工作。

html, body, div.container-fluid, div.video-container { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
} 
 
video, source { 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
}

<div class="container-fluid adjustedHeight"> 
 
    <div class="video-container"> 
 
    <video autoplay loop class="fillWidth"> 
 
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
 
     Your browser does not support the video tag. I suggest you upgrade your browser.</video> 
 
</div>

來源

2016-01-22 14:56:57

恐怕這似乎並沒有工作 - 我仍然越來越黑吧 - 我會發佈一個JSFiddle –

我用JSFiddle更新了這個問題 –

任何想法爲什麼它不工作？ –

我不知道，如果你問全屏w.r.t.瀏覽器窗口本身或全屏作爲整個顯示器，但如果是前者，我認爲以下後可能會幫助您解決問題：

http://slicejack.com/creating-a-fullscreen-html5-video-background-with-css/

來源

2016-01-22 15:45:11 unxn3rd

這似乎是整個頁面背景，我希望能夠滾動瀏覽我的視頻，即只將背景滾動到我的頁面的一部分，該部分與視口大小相同。 –

可能的，這將與工作

.video-container{ 
width:100vw; 
height:100vh; 
}

其中，vw是視口寬度，vh是視口高度。

來源

2016-01-22 15:53:39

我對視頻容器沒有任何問題，它對視頻進行動態調整大小，同時保持導致問題的高寬比。我似乎無法定義視頻來填充寬度和高度，同時讓需要的任何維度溢出。 –

全屏HTML5無JS視頻背景

編輯：

回答

相關問題