FoundryVTT - Want a video background on login?
Tags: foundryvtt, javascript, webdev, tutorial
Published: 2022-10-30 21:32:46

## 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](https://dev.to/mbround18/how-to-hijack-your-head-38dn)

## Simplified

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

```html
<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:

```js
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:

```js
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

```js
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:

```js
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:

```js
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:

```js
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](https://gist.github.com/mbround18/e4853df98392eb8569a4fd4042723859)
**12)** Now inject the script using the raw button to get a direct link to the file!

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