Position video and make it repeat in background like images

Question

Is there a way to position a video that I put in the background of my html page and make it repeat as I would do with an image/gif using the background-* css properties? I'm sure this isn't possible with the current version of CSS but maybe there is a way to do it with JavaScript. The video was originally a gif, and what I am trying to do works with a gif, but I converted it to a webm and mp4 to improve load performance and save bandwidth. Below is code of what I would do if my video was a gif and then there is code of what I have currently and want to replicate the code for "Video as Gif".

Video as Gif

body {
    background: url('https://media3.giphy.com/media/KZFrf9JusXzmpnPsT6/giphy.gif?cid=ecf05e47nlo6zhk89xm58aaee38kzq5tddoko195kri6hv0e&rid=giphy.gif') center center;
  background-repeat: repeat;
  position: relative;
  background-size: auto;
  overflow: hidden;
    width: 100%;
}

<html>
<body>
</body>
</html>

Gif as Video

#video-background {
    top: 0;
    left: 0;
  position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    overflow: hidden;
}

  <div id="video-background">
    <video aria-hidden="true" playsinline="" autoplay="" muted="" loop=""> <source src="//starlink.ua/media/mod_starlink/car-blur.webm" type="video/webm"> <source src="//starlink.ua/media/mod_starlink/car-blur.mp4" type="video/mp4"></video>
  </div>

score 1 · Answer 1 · answered Sep 07 '20 at 03:50

HTML

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

CSS

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

This will make your video in the background and will be auto-played, Z index will allow you to make new changes on the video and video will be completely at the back and your new elements in the front.

score -1 · Answer 2 · answered Sep 03 '20 at 22:13

Is there a way to position a video that I put in the background of my html page and make it repeat as I would do with an image/gif using the background-* css properties?

I don't think so.

You can use JS to clone the video element as many times as it takes to fill the screen. *Note you'll need to handle window resize.

https://jsfiddle.net/ajd62q5t/

const videoWidth = 480;
let videoHeight = 0;
let grid;
let ww = window.innerWidth;
let wh = window.innerHeight;

const elWrapper = document.querySelector("#video-background > div");
const elVideo = elWrapper.querySelector("video");

elVideo.addEventListener(
  "loadeddata",
  () => {
    setVideoHeight();
    generateVideoGrid();
    updateStyles();
  },
  false
);

function setVideoHeight() {
  const aspectRatio = elVideo.videoWidth / elVideo.videoHeight;
  videoHeight = videoWidth / aspectRatio;
}

function generateVideoGrid() {
  let cols = 1;
  let rows = 1;

  if (ww > videoWidth) {
    cols = Math.ceil(ww / videoWidth);
    if (cols % 2 === 0) {
      cols++;
    }
  }

  if (wh > videoHeight) {
    rows = Math.ceil(wh / videoHeight);
    if (rows % 2 === 0) {
      rows++;
    }
  }

  const copies = cols * rows;
  for (let i = 1; i < copies; i++) {
    const clone = elVideo.cloneNode(true);
    elWrapper.appendChild(clone);
  }

  grid = [cols, rows];
}

function updateStyles() {
  document.documentElement.style.setProperty(
    "--video-width",
    `${videoWidth}px`
  );
  document.documentElement.style.setProperty(
    "--video-height",
    `${videoHeight}px`
  );

  document.documentElement.style.setProperty("--video-bg-grid-cols", grid[0]);
  document.documentElement.style.setProperty("--video-bg-grid-rows", grid[1]);
  
  elWrapper.classList.add('ready');
}

#video-background {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  
  /* Center the grid */
  display: flex;
  justify-content: center;
  align-items: center;
}

#video-background > div {
  display: grid;
  grid-template-columns: repeat(var(--video-bg-grid-cols), var(--video-width));
  grid-template-rows: repeat(var(--video-bg-grid-rows), var(--video-height));
  opacity: 0;
  transition: opacity 2s ease;
}

#video-background > div.ready {
 opacity: 1;
}

video {
  display: block;
  height: var(--video-height);
  width: var(--video-width);
}

<div id="video-background">
  <div>
    <video aria-hidden="true" playsinline="" autoplay="" muted="" loop="">
      <source src="//starlink.ua/media/mod_starlink/car-blur.webm" type="video/webm">
      <source src="//starlink.ua/media/mod_starlink/car-blur.mp4" type="video/mp4"></video>
  </div>
</div>

Sorry, what I mean is to improve the performance. When I ran the jsfiddle and increased the screen size of the console, while it created more cloned videos, it took up a lot of CPU. So is there a way to run your implementation without it taking up too much processing? — nosh, Sep 03 '20 at 23:21
Ah right. Yeah I noticed that too. I'm not sure but I think it's because they're all playing simultaneously? I'll take a look into it. Would it be an option for you to stitch the videos together into one video? — sol, Sep 03 '20 at 23:28
Another alternative would be generating the background with a canvas? — sol, Sep 03 '20 at 23:33
If you can use a GIF I reckon that's the easiest solution by far. You could use a service that will convert from video to GIF. Something like Cloudinary (which has a decent free tier). I'm not sure of the quality though > https://cloudinary.com/documentation/videos_to_animated_images — sol, Sep 03 '20 at 23:41
I can use the gif, it's just a big file to transfer over the internet to clients. It gets cached but eventually expires (after 30 days) which is good but when a client first connects the server ends up sending a big file. Plus I think it takes longer for browsers to load gifs in the window given the big file size. That's why I hoped I could find a solution by using MP4 and WebM files. — nosh, Sep 04 '20 at 00:20

Position video and make it repeat in background like images

2 Answers2