From 397168f90a4f158ed3294643501c2bf02db99cbe Mon Sep 17 00:00:00 2001 From: 14ROVI <29734170+14ROVI@users.noreply.github.com> Date: Wed, 21 Dec 2022 04:01:30 +0000 Subject: [PATCH] video background support --- index.css | 13 +++++++++++++ index.html | 2 ++ index.js | 12 +++++++++++- 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/index.css b/index.css index 9a2ca44..e045780 100644 --- a/index.css +++ b/index.css @@ -21,6 +21,19 @@ body { justify-content: flex-end; } +#video-background { + position: relative; + object-fit: cover; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: -1; +} + h1 { font-family: 'Noto Sans Display', sans-serif; font-size: 50px; diff --git a/index.html b/index.html index 5c246b3..3370dae 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,8 @@ + +
diff --git a/index.js b/index.js index 21886d0..0a9f155 100644 --- a/index.js +++ b/index.js @@ -105,6 +105,7 @@ async function displayEvents() { function displayEvent(event) { const now = new Date(); let body = document.body; + let videoContainer = document.getElementById("video-background"); let sponsorsContainer = document.getElementById("sponsors"); let QRCodeElement = document.getElementById("qr-code"); let eventTitleElement = document.getElementById("event-title"); @@ -133,7 +134,16 @@ function displayEvent(event) { kioskOptions.background = "https://cssbristol.co.uk/assets/images/contrib/events/" + kioskOptions.background; } - body.style.backgroundImage = `url(${kioskOptions.background}), url(default_background.png)`; + if (kioskOptions.background.match(/\.(jpg|jpeg|png|gif)$/i)) { + videoContainer.style.display = "none"; + body.style.backgroundImage = `url(${kioskOptions.background}), url(default_background.png)`; + } else { + videoContainer.style.display = ""; + videoContainer.innerHTML = ""; + let source = document.createElement("source"); + source.src = kioskOptions.background; + videoContainer.appendChild(source); + } sponsorsContainer.innerHTML = ""; if (kioskOptions.show_sponsors) {