jQuery背景視頻無法覆蓋整個頁面

Question

我正在使用Vide在后台播放視頻。 這是播放div標簽。

<div style="width: 1000px; height: 500px;"
  data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>

當我將樣式更改為

width: 100%; height: 100%;

視頻從頁面上消失。 我希望視頻覆蓋所有頁面，並且可以向下滾動。

為什么會發生？

我該如何解決？

Answer 1

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Body background example</title>
<style>
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body data-vide-bg="video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
 <script src="../src/jquery.vide.js"></script>

 </body>
 </html>

只需放置滾動條或使用一些jquery進行滾動就可以了。

Answer 2

如果要用div覆蓋所有內容並根據屏幕大小進行調整，請使用以下代碼（重要的是，該指令是div的指令）：

style="
    position: absolute; 
    z-index: -1;
    top: 0px; 
    left: 0px; 
    bottom: 0px;
    right: 0px; 
    overflow: hidden; 
    -webkit-background-size: cover; 
    background-size: cover; 
    background-image: none; 
    background-position: 50% 50%; 
    background-repeat: no-repeat no-repeat;"

如果要在正文中顯示，則在示例examples / body-bg.html文件夾中僅是適用於正文的示例： https : //github.com/VodkaBears/Vide/tree/master/examples

Answer 3

您使用了錯誤的度量單位。 如果通過CSS image-background拉入圖像，則可以將image-background-size設置為contains屬性。 這樣可以確保視頻完全適合它的容器（body，div，span等）。

body{
background-image:url(''your-video.mp4');
background-repeat:no-repeat;
image-background-size: contain;
}

資料來源： w3schools CSS3 background-size屬性

您也可以嘗試使用高度和寬度，但要使用vh和vw指標。 它根據視口尺寸設置高度和寬度。

資料來源： CSS單位

jQuery背景視頻無法覆蓋整個頁面

問題描述

3 個解決方案

解決方案1
0 2016-07-17 19:06:14

解決方案2
0 2016-07-17 19:46:10

解決方案3
0 2016-07-17 19:50:59

jQuery背景視頻無法覆蓋整個頁面

問題描述

3 個解決方案

解決方案1 0 2016-07-17 19:06:14

解決方案2 0 2016-07-17 19:46:10

解決方案3 0 2016-07-17 19:50:59

解決方案1
0 2016-07-17 19:06:14

解決方案2
0 2016-07-17 19:46:10

解決方案3
0 2016-07-17 19:50:59