Css 定位视频并使其在背景图像中重复

是否有一种方法可以定位我放在html页面背景中的视频，并使其重复，就像使用

background-*

css属性处理图像/gif一样？我确信这在当前版本的CSS中是不可能的，但也许有一种方法可以用JavaScript实现。视频最初是gif格式的，我正在尝试使用gif格式，但我将其转换为webm和mp4格式，以提高加载性能并节省带宽。下面是我会做什么，如果我的视频是一个gif的代码，然后是我目前的代码，并希望复制代码为“视频作为gif”

视频格式为Gif

正文{
背景：url（'https://media3.giphy.com/media/KZFrf9JusXzmpnPsT6/giphy.gif?cid=ecf05e47nlo6zhk89xm58aaee38kzq5tddoko195kri6hv0e&rid=giphy.gif""中",；
背景重复：重复；
位置：相对位置；
背景尺寸：自动；
溢出：隐藏；
宽度：100%；
}

是否有一种方法可以定位我放在html页面背景中的视频，并使其重复，就像使用background-*css属性处理图像/gif一样

我不这么认为

您可以使用JS克隆视频元素，克隆次数与填充屏幕所需的次数相同*注意，您需要处理窗口大小调整

const videoWidth=480；
设videoHeight=0；
让网格；
设ww=window.innerWidth；
设wh=窗内高度；
const elWrapper=document.querySelector（“视频背景>div”）；
const elVideo=elWrapper.querySelector（“视频”）；
elVideo.addEventListener(
“加载数据”，
() => {
setVideoHeight（）；
generateVideoGrid（）；
updateStyles（）；
},
假的
);
函数setVideoHeight（）{
const aspectRatio=elVideo.videoWidth/elVideo.videoHeight；
视频高度=视频宽度/纵横比；
}
函数generateVideGrid（）{
设cols=1；
设行=1；
如果（ww>视频宽度）{
cols=Math.ceil（ww/videoWidth）；
如果（列%2==0）{
cols++；
}
}
如果（wh>videoHeight）{
行=数学单元（wh/videoHeight）；
如果（行%2==0）{
行++；
}
}
const copies=cols*行；
for（设i=1；i

#视频背景{
排名：0；
左：0；
位置：固定；
宽度：100%；
身高：100%；
溢出：隐藏；
指针事件：无；
/*将网格居中*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#视频背景>div{
显示：网格；
网格模板列：重复（var（--video bg grid cols），var（--video width））；
网格模板行：重复（var（--视频bg网格行），var（--视频高度））；
不透明度：0；
过渡期：不透明度和易用性；
}
#视频背景>div.ready{
不透明度：1；
}
录像带{
显示：块；
高度：var（--视频高度）；
宽度：var（--视频宽度）；
}

HTML

---

这将使您的视频在后台自动播放，Z索引将允许您对视频进行新的更改，视频将完全位于后面，新元素位于前面。

加载是什么意思？对不起，我的意思是提高性能。当我运行JSFIDLE并增加控制台的屏幕大小时，虽然它创建了更多的克隆视频，但却占用了大量CPU。那么，有没有一种方法可以在不占用太多处理的情况下运行您的实现呢。是的，我也注意到了。我不确定，但我认为这是因为他们同时在比赛？我会调查一下的。你可以选择将视频拼接成一个视频吗？另一个选择是用画布生成背景吗？如果你能使用GIF，我认为这是目前为止最简单的解决方案。您可以使用将视频转换为GIF的服务。类似Cloudinary（它有一个不错的免费层）的东西。但我不确定质量>

<video autoplay loop muted id="bgvideo">
    <source src="YOUR VIDEO SOURCE">
  </video>

#bgvideo {
  position: fixed;
  min-height: 100%;
  min-width: 100%;
  z-index: -100; }