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%;
}

Gif as Video

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

user_13688585 · Answer

HTML

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.

user_5561605 · Answer

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);
}

Position video and make it repeat in background like images

2 Answers