video + timeline are synchronized

www/public_html/scss/styles.scss

@@ -16,26 +16,56 @@ html, body{
   top:0; left:0;
 }
 
-#pictures{
+#timelaps{
   position: relative; z-index: 5;
   width:100%; height:100%;
   overflow: hidden;
   // border: 1px solid blue;
 
-  video {
+  video#timelapsvid {
+    position: absolute;
+    top: 0; left: 0;
     width:100%; height:100%;
-    source:not(.1080p){
-      display:none;
+    // source:not(.1080p){
+    //   display:none;
+    // }
+
+    @media (min-aspect-ratio: 16/9) {
+      height: 300%;
+      top: -100%;
     }
+
+    @media (max-aspect-ratio: 16/9) {
+      width: 300%;
+      left: -100%;
+    }
+
+
   }
 
 }
 
 #timeline{
   position: absolute; z-index: 9;
-  bottom:0; left:0; width:67%; margin:1% 0 1% 32%; height:3em;
-  background-color: rgba(255, 255, 255, 0.6);
+  bottom:0; left:0; width:67%; margin:1% 0 1% 32%; padding:7px;
+  background-color: rgba(0, 0, 0, 0.8);
   border-radius: 2px;
+
+  .vis-timeline{
+    border:none;
+  }
+  .vis-time-axis,
+  .vis-background, .vis-background.vis-horizontal, .vis-background.vis-vertical,
+  .vis-panel.vis-center, .vis-panel.vis-top, .vis-panel.vis-bottom{
+    border:none;
+  }
+  .vis-text{
+    color:white;
+  }
+
+  .vis-custom-time.videotime{
+    background-color: red;
+  }
 }
 
 
@@ -44,4 +74,5 @@ html, body{
   bottom:0; left:0; width:30%; margin:1%; height:40%;
   background-color: rgba(255, 255, 255, 0.6);
   border-radius: 2px;
+  display: none;
 }