video background support

cssbristol · Dec 21, 2022 · 397168f · 397168f
1 parent 678a292
commit 397168f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git 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
@@ -16,6 +16,8 @@
         <meta charset="utf-8">
     </head>
     <body class="background">
+        <video id="video-background" autoplay muted loop></video>
+
         <div class="main-container">
             <div>
                 <div id="sponsors"></div>

diff --git 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) {