fix video

_includes/header.html

@@ -1,4 +1,4 @@
-<header class="hero" style="background-image: url({{ page.image }});">
+<header class="hero" {% unless page.video_path %}style="background-image: url({{ page.image }});"{% endunless %}>
   <div class="textcontainer">
     <h1>{{ page.title }}</h1>
     <p>{{ page.description }}</p>

_layouts/default.html

@@ -40,7 +40,11 @@
 {% endunless %}
 {% include cookie-consent.html %}
 {% include scripts.html %}
-
+<div class="fullscreen-bg">
+  <video autoplay muted loop poster="{{ page.image }}" class="fullscreen-bg__video">
+    <source src="{{ page.video_path }}" type="video/mp4">
+  </video>
+</div>
 </body>
 </html>
 

_sass/_layout.scss

@@ -19,6 +19,7 @@ body {
   -webkit-transition: filter 400ms ease-in;
   -moz-transition: filter 400ms ease-in;
   transition: filter 400ms ease-in;
+  z-index: 1;
 
 }
 .content-wrapper {
@@ -88,6 +89,7 @@ section {
   -webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
   -moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
   box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
+  z-index: 2;
   h2 {
     text-align: center;
   }
@@ -96,6 +98,8 @@ section:first-of-type {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+  margin-top:0;
+  padding-top: 40px;
 }
 footer {
   display: flex;
@@ -110,6 +114,7 @@ footer {
   background-repeat: repeat-x;
   background-position: top;
   box-sizing: border-box;
+  z-index: 2;
   div {
     flex: 0 1 280px;
     margin:20px;

_sass/_videos.scss

@@ -4,17 +4,24 @@
   height: 100%;
   width: 100%;
   overflow: hidden;
-  z-index: -100;
-  background: #fff;
+  z-index: 0;
+  background: _palette(bg);
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
+
 }
 
 .fullscreen-bg__video {
-  background: #fff;
-  position: relative;
-  left: 50%;
-  top:50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
+  object-fit: cover;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  
+
 }
 #myVideo {
   position: absolute;
@@ -22,4 +29,5 @@
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
+  
 }