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属性。它将确保视频完全适合容器（主体，div，跨度等）。

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

来源：w3schools CSS3 background-size Property

您也可以尝试使用高度和宽度，但请使用vh和vw指标。它根据视口尺寸设置高度和宽度。

来源：CSS Units

JQuery背景视频不涵盖整个页面

3 个答案: