如何解决背景视频 CSS
我正在尝试仅使用 css 将背景从图像更改为视频,不使用标签,但无法运行。我不想在网站的所有页面上插入标签。
body {
font-family: "Lato",sans-serif;
margin-bottom: 10px;
margin-top: 0px;
background-image: url('https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4');
}
解决方法
不能这样做,您需要添加视频标签。
<video autoplay muted loop id="myVideo">
<source src="SOURCE_URL" type="video/mp4">
</video>
,
<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
<source src="{{SOURCE_URL/ SOURCE_FILE}}" type="video/webm">
<source src="{{SOURCE_URL/ SOURCE_FILE}}" type="video/mp4">
</video>
属性很多!海报属性在加载过程中或未加载视频时显示视频。也许您想使用 CSS 背景。
自动播放的属性就在那里,因为我们希望视频播放。记住,我们这里很好吃,所以没关系。没有控制属性,因此用户无法启动/停止视频。这适用于具有 play-inline 属性的 iOS。静音属性好品味(视频应该没有声音,但它也需要iOS才能获得自动播放功能。然后循环,好吧,循环,好吧。
您可以这样做以覆盖整个页面的视频:
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。