add video to home page

content/home/index.md

@@ -9,19 +9,7 @@ weight: 1
 
 <!-- section 1 -->
 
-{% row(style="center" margin="tight" bgPath="img/freeflow_header_home4.jpeg" bgStyle="full") %}
-
-<div class="text-white">
-
-# FreeFlow Nation
-
-<br>
-
-A complementary digital "nation" which flows freely across physical borders welcoming as digital citizens all those who dream of a better world and are ready to act.
-
-</div>
-
-{% end %}
+{{ video(video="./video/evening.mp4", autoplay=true, class="vimeo") }}
 
 <div class="container mx-auto">
 

css/index.css

@@ -387,4 +387,37 @@ header #menu button,  #info-menu button, #info-mobile-menu button{
 header #menu button a{
   @apply
   px-0
+}
+
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  z-index: 9;
+}
+video {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+}
+.layer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  z-index: 40;
+  background-color: black;
+  opacity: .5;
+}
+.content {
+  background: rgba(0, 0, 0, 0.5);
+  color: #f1f1f1;
 }

templates/shortcodes/video.html

@@ -0,0 +1,19 @@
+<div class="video-wrapper">
+    <video
+        playsinline
+        autoplay
+        muted
+        loop
+    >
+        <source src="{{video}}" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <div class="layer">
+        <div class="content max-w-xl">
+            <h1>FreeFlow Nation</h1>
+            <p>
+                A complementary digital "nation" which flows freely across physical borders welcoming as digital citizens all those who dream of a better world and are ready to act.
+            </p>
+        </div>
+    </div>
+</div>