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
- Open Cloudflare or the method of script injection.
- 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>
Top comments (0)