add video fallback

app/settings.py

@@ -22,7 +22,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['*']
 
 
 # Application definition

app/static/css/partials/_film.scss

@@ -106,6 +106,7 @@ main > .film {
     margin-right: auto;
     padding: 20px;
     font-size: 18px;
+    z-index: 200;
 
     a {
       color: #ee0;
@@ -113,6 +114,11 @@ main > .film {
       font-weight: 700;
     }
   }
+  
+  .bio-block, .play, .summary-block, .texts {
+    position: relative;
+  }
+
 }
 
 .summary-block {
@@ -129,22 +135,26 @@ main > .film {
 
 .video-block {
   height: 100vh;
-  //padding-bottom: 50px;
-  //padding-top: 50px;
 
-  video {
+  video, .video-fallback-block {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    z-index: -9999;
     height: 100vh;
     width: 100vw;
     object-fit: fill;
-    //height: 100vh;
-    //width: auto;
     margin: 0 auto;
   }
+
+  video {
+    z-index: 100;
+  }
+
+  .video-fallback-block {
+    z-index: 90;
+  }
+
 }
 
 .icon-play {

app/templates/film.html

@@ -33,6 +33,7 @@ body {
 				
 		</div>	
 		<div class="video-block">		
+			<img src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg" class="video-fallback-block">	
 			<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" poster="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg" autoplay loop muted playsinline></video>
 		</div>
 		<div class="summary-block">