Video Background

[jdelamater99]

Don't know if anyone is looking to do this, but I figured out how use videos as the background for Heimdall.

Custom CSS

top aligned video (choose one)

video {
position:fixed;
top:0;
left:0;
min-width:100%;
min-height: 100%;
}

bottom aligned video (choose one)

video {
position:fixed;
bottom: 0;
left:0;
min-width:100%;
min-height: 100%;
}

vertically centered video (choose one)

video {
position:fixed;
left:0;
min-width:100%;
min-height: 100%;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Custom Javascript

single video, falls back to background image defined in settings or default bg.

const videoNode = document.createElement("video");
const srcNode = document.createElement("source");
const bgNode = document.getElementById("app");

srcNode.src = "https://ip_or_url/path/video.mp4";

bgNode.prepend(videoNode);
videoNode.appendChild(srcNode);
videoNode.autoplay = true;
videoNode.loop = true;
videoNode.muted = true; 

random video, falls back to matching static bg

const videoNode = document.createElement("video");
const srcNode = document.createElement("source");
const bgNode = document.getElementById("app");

let baseURL = "https://ip_or_url/path/";
let imgExt = ".jpg";
let videoExt = ".mp4";

let bgArr = ["dark_forest", "campsite", "pastel_forest", "shrooms", "red_flowers", "flowers_vase", "record_player"];

let rndNum = Math.floor(Math.random() * bgArr.length);

let shuffledbgArr = bgArr
 .map(value => ({value, sort: Math.random() }))
 .sort((a, b) => a.sort - b.sort)
 .map(({value}) => value)

document.getElementById("app").style.backgroundImage = "url("+baseURL + bgArr[rndNum] + imgExt+")";
srcNode.src = baseURL + bgArr[rndNum] + videoExt;

bgNode.prepend(videoNode);
videoNode.appendChild(srcNode);
videoNode.autoplay = true;
videoNode.loop = true;
videoNode.muted = true;

Screen_Recording_2024-09-12_111008.mp4