FoundryVTT - Want a video background on login?

Prerequisites

• It is suggested that you have a way to inject scripts into your foundry instance. I have a tutorial on this via "How to Hijack your head (HTML head tag)" which uses Cloudflare

Simplified

1. Open Cloudflare or the method of script injection.
2. Add the following injection:

<script
  src="https://gist.githubusercontent.com/mbround18/e4853df98392eb8569a4fd4042723859/raw/1dcd190a521e35786a43dcce806a588ad0bb2bea/video-background.js"
  async
  defer
  type="text/javascript"
  crossorigin="anonymous"
></script>

2.1. If you are using the Cloudflare method of injecting it would be something like this:

class ElementHandler {
  element(element) {
    element.append(
      `<script src="https://gist.githubusercontent.com/mbround18/e4853df98392eb8569a4fd4042723859/raw/1dcd190a521e35786a43dcce806a588ad0bb2bea/video-background.js" async defer type="text/javascript" crossorigin="anonymous"></script>`,
      { html: true }
    );
    console.log("injected");
  }
}

DIY

1) Head on over to GitHub, if you dont have an account I suggest creating one.
2) Click the plus icon in the upper right-hand corner.
3) Click new Gist
4) Give your gist a title.
5) Create a function:

function videoBackground() {
  // Next bit of code goes here!
}

videoBackground();

6) Lets first parse out the extension, we will be using a video & source elements which need a type

const body = document.querySelector("body"); // This bit gives us the body
const background = body.style.backgroundImage
  .replace('url("', "")
  .replace('")', ""); // This parses out the background image.

7) Now with the background accessible and parsed out, lets grab the file extension:

const parts = background.split(".");
const extension = parts[parts.length - 1];

8) With the extension on hand we need to parse out the type of file it is:

let type;
switch (extension) {
  case "avi":
    type = "video/avi";
    break;
  case "ogv":
    type = "video/ogg";
    break;
  case "mp4":
    type = "video/mp4";
    break;
  default:
    return;
}

9) The bit of code above should give us a few options for video backgrounds.
10) Now, lets append our video background to the body:

if (type) {
  let videoBackground = document.querySelector("#video-background"); // This bit cheks for the element.
  if (!videoBackground) {
    // If not exist we create it.
    videoBackground = document.createElement("video");
    videoBackground.id = "video-background";
    videoBackground.autoplay = true;
    videoBackground.muted = true; // Turn this to false if you want the audio.
    videoBackground.loop = true;
    body.appendChild(videoBackground); // Append it to the body.
  }
  let source = document.querySelector("#video-background source"); // Check for the background source.
  if (!source) {
    source = document.createElement("source");
    videoBackground.appendChild(source); // Apend source element.
  }
  source.src = background; // Set background
  source.type = type; // Set type
}

11) In the end, it should look a little something like this
12) Now inject the script using the raw button to get a direct link to the file!

<script
  src="Your link here."
  async
  defer
  type="text/javascript"
  crossorigin="anonymous"
></script>