Add fallback option for video-background

BitCannaGlobal · Oct 2, 2024 · 9cdc5c5 · 9cdc5c5
1 parent b45bcd4
commit 9cdc5c5
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/assets/video/smoking-buddhead-mobile.png b/assets/video/smoking-buddhead-mobile.png
diff --git a/assets/video/smoking-buddhead.png b/assets/video/smoking-buddhead.png
diff --git a/index.html b/index.html
@@ -65,12 +65,12 @@
   </nav>
 
   <main>
-    <section class="py-5 text-light overflow-hidden position-relative" id="home">
+    <section class="py-5 text-light overflow-hidden position-relative fallback-bg-mobile" id="home">
       <video class="d-md-none position-absolute object-fit-cover" playsinline autoplay loop muted style="top: 0; left: 0; width: 100%; height: 100%;">
         <source src="/assets/video/smoking-buddhead-mobile.mp4" type="video/mp4">
         <source src="/assets/video/smoking-buddhead-mobile.webm" type="video/webm">
       </video>
-      <video class="d-none d-md-block position-absolute object-fit-cover" playsinline autoplay loop muted style="top: 0; left: 0; width: 100%; height: 100%;">
+      <video class="d-none d-md-block position-absolute object-fit-cover fallback-bg" playsinline autoplay loop muted style="top: 0; left: 0; width: 100%; height: 100%;">
         <source src="/assets/video/smoking-buddhead.mp4" type="video/mp4">
         <source src="/assets/video/smoking-buddhead.webm" type="video/webm">
       </video>

diff --git a/styles.css b/styles.css
@@ -84,6 +84,16 @@ h4, h5 ,h6 {
   background: radial-gradient(circle at 90% -50%, #146a42, #212529)
 }
 
+/*** Fallback for video background ***/
+
+.fallback-bg {
+  background-image: url('/assets/video/smoking-buddhead.png')
+}
+
+.fallback-bg-mobile {
+  background-image: url('/assets/video/smoking-buddhead-mobile.png')
+}
+
 /*** Divider & borders ***/
 
 .bg-divider {