Cover video - initial transplant

Transplanted cover video feature from fork of @thomasjungblut and adapted to latest hugo scroll code

Co-Authored-By: Thomas Jungblut <thomas.jungblut@gmail.com>

assets/css/theme.scss

@@ -12,7 +12,12 @@ body {
   line-height: 0;
 }
 
-#site-head {
+#site-head.withCenteredImage{
+  /* can't be used together with video */
+  background: var(--section-light-bg-color) no-repeat center center;
+}
+
+#site-head, #site-head.withCenteredImage {
   position: relative;
   display: table;
   width: 100%;
@@ -20,9 +25,22 @@ body {
   margin-bottom: 0rem;
   text-align: center;
   color: var(--cover-text-color);
-  background: var(--section-light-bg-color) no-repeat center center;
   background-size: cover;
 
+  /* Big cover video at the landing area */
+  video {
+    bottom: 0;
+    height: 100%;
+    min-width: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+    z-index: -100;
+  }
+
   .title-and-description-guard {
     margin: auto;
     padding: 0.6em;

exampleSite/content/_index.md

@@ -1,8 +1,13 @@
 ---
 # Striking header background image, Ideal images are homogenous around the centre and contrasting to the text. Non-ideal images can use `title_guard`
 header_image: "images/cover-image.jpg"
+#
+# When set true, uses video from custom_header_video.html partial, instead of header_image
+header_use_video: true
+#
 # Optional header logo. CSS: `#blog-logo`, with max-height defined, optimize to prevent scaling
 header_logo: "images/chef-hat.png"
+#
 # Headers are safeHTML, you can use HTML tags such as b,i,u,br
 header_headline: "Jane Doe"
 header_subheadline: "<b>Nutrition</b> Coach & <b>Chef</b> Consultant"

exampleSite/layouts/partials/custom_header_video.html

@@ -0,0 +1,6 @@
+<video playsinline="" autoplay="true" muted="" loop=""
+    poster="https://www.ledger.com/wp-content/themes/ledger-v2/public/images/homepage/home-hero-ledger.jpg">
+    <source src="https://cdn.shopify.com/s/files/1/2974/4858/files/home-hero-mobile.webm?v=1637155649" type="video/webm">
+    <source src="https://cdn.shopify.com/s/files/1/2974/4858/files/home-hero-mobile.mp4?v=1637155649" type="video/mp4">
+    <source src="https://cdn.shopify.com/s/files/1/2974/4858/files/home-hero-mobile.mov?v=1637155649" type="video/mov">
+</video>

layouts/index.html

@@ -4,8 +4,21 @@
 {{ $sections := cond .Site.BuildDrafts $sections (where $sections "Draft" "==" false) }}
 
 <!-- Welcome screen that scrolls out of view -->
-<header id="site-head" {{ with .Params.header_image }}style="background-image: url({{ . }})"{{ end }}>
+{{ if not .Params.header_use_video }}
+<header id="site-head" class="withCenteredImage" {{ with .Params.header_image }}style="background-image: url({{ . }})"{{ end }}>
+{{ else }}
+<header id="site-head">
+{{ end }}
+
     <div class="vertical">
+
+        {{ if .Params.header_use_video }}
+            <!-- A partial to be overwritten by the user.
+            Simply place a custom_header_video.html into
+            your local /layouts/partials-directory -->
+            {{- partial "custom_header_video.html" . -}}
+        {{ end }}
+
         <div id="site-head-content" class="inner">
             {{ with .Params.header_logo }}<img id="blog-logo" src="{{ . }}" />{{ end }}
 

layouts/partials/custom_header_video.html

@@ -0,0 +1,14 @@
+<!-- A partial to be overwritten by the user.
+     Simply place a custom_head_video.html into
+     your local /layouts/partials-directory.
+     Its content will appear after the site-head/vertical section. 
+     This can be used to inject a video as an alternative background.
+     Full example below: -->
+
+<!--
+<video class="background-video" id="background-video" playsinline="" autoplay="true" muted="" loop="" poster="some_poster_jpg">
+     <source src="some_webm_video" type="video/webm">
+     <source src="some_mp4_video" type="video/mp4">
+     <source src="some_mov_video" type="video/mov">
+</video>
+-->