Video Background Script for dev.to Article

README.md

Video Background for FoundryVTT

If you would like to learn how to use this, click here!

video-background.js

function videoBackground() {
  const body = document.querySelector("body");
  const background = body.style.backgroundImage
    .replace('url("', "")
    .replace('")', "");

  const parts = background.split(".");
  const extension = parts[parts.length - 1];
  let type;
  console.log({ background, extension });
  switch (extension) {
    case "avi":
      type = "video/avi";
      break;
    case "ogv":
      type = "video/ogg";
      break;
    case "mp4":
      type = "video/mp4";
      break;
    default:
      return;
  }

  if (type) {
    let videoBackground = document.querySelector("#video-background");
    if (!videoBackground) {
      videoBackground = document.createElement("video");
      videoBackground.id = "video-background";
      videoBackground.autoplay = true;
      videoBackground.muted = true;
      videoBackground.loop = true;
      body.appendChild(videoBackground);
    }
    let source = document.querySelector("#video-background source");
    if (!source) {
      source = document.createElement("source");
      videoBackground.appendChild(source);
    }
    source.src = background;
    source.type = type;
  }
}

videoBackground()