如何解决无法将视频添加为背景
我在网上环顾四周并尝试了两种不同的方法,但是,两种方法似乎都不起作用。
我需要让视频覆盖整个网页背景(我已经这样做了)-
css -
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
HTML -
<video playsinline autoplay muted loop poster="img/videoframe.jpg" id="bgvid">
<source src="https://streamable.com/kuuap9" type="video/mp4">
</video>
然而,这并没有在我的网站背景上加载任何东西......我在这里遗漏了什么/有更简单的解决方案吗?
我尝试过的另一种方法是,没有运气 -
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML-
<div class="fullscreen-bg">
<video playsinline autoplay muted loop poster="img/videoframe.jpg" id="bgvid">
<source src="https://streamable.com/kuuap9" type="video/mp4">
</video>
</div>
在此先感谢各位,任何帮助将不胜感激。
解决方法
只需要下载文件或 url 有 .mp4
和
#bgvid {
width:100%;
hight:100vh;
position: absulote;
z-index:-1;
}
,
使用以下代码更新您的 HTML
<video controls playsinline autoplay muted loop poster="img/videoframe.jpg" id="bgvid">
<source src="https://streamable.com/kuuap9" type="video/mp4">
Your browser does not support the video tag.
</video>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。