javascript - JQuery 背景视频不覆盖整个页面

标签 javascript jquery html css

我正在使用 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%;

视频从页面上消失。我希望该视频覆盖所有页面并且我可以向下滚动。

为什么会这样?

我该如何解决?

最佳答案

<!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 进行滚动。

关于javascript - JQuery 背景视频不覆盖整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38424862/

相关文章:

javascript - 延迟加载 Instagram block 引用嵌入

javascript - 使用日期选择器填充日期下拉列表

javascript - 使用带有非标准选项的 jQuery 自动完成功能?

javascript - 在移相器中定义位置

javascript - 向 ckeditor 添加占位符

javascript - 如何完整获取星期几?

javascript - 组件看不到全局样式

javascript - 如何检查页面重新加载是否完成

JavaScript:for循环中集合为空

javascript - 动画后定义文本的高度和宽度