背景视频 CSS

编程问答 2022-05-15

问题描述

我正在尝试仅使用 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;
}
backgroundbackgroundbackgroundvideovideo