Merge pull request #137 from zjedi/pr/cover-video

Cover video

README.md

@@ -13,6 +13,7 @@ Promo image which may be a bit outdated:<br/>
 - Responseive to screen size/shape
 - SEO friendly
 - Customizable
+- Video cover
 - [Fork Awesome Icons][fork-awesome-icons] out of the box
 - Header logo
 - Visual guards to guarantee readability
@@ -69,6 +70,9 @@ Look at this nice »envelope«-icon: `{{<icon class="fa fa-envelope">}}`. I took
 ### Header logo
 Configured in `_index.md`, see `exampleSite`: `header_logo: "images/chef-hat.png"`
 
+### Video cover
+Set `header_use_video: true` in `/exampleSite/content/_index.md` and define video source via custom partial, such as `exampleSite/layouts/partials/custom_header_video.html`.
+
 ### Footer version information
 In order to see technical version information (extracted from Hugo's [GitInfo](https://gohugo.io/variables/git/))) set the following general option in your config.toml: `enableGitInfo = true`
 
@@ -84,8 +88,6 @@ Referencing and showing icons in front of the link text is possible with a new p
 Visit as at {{<extlink icon="fa fa-instagram" text="Instagram" href="https://www.instagram.com/yourInstagramName/">}}
 ```
 
-
-
 ## 🐛 Issues / 💡 Feedback / 👑 Contributing
 [Discussion](https://github.com/zjedi/hugo-scroll/discussions) for Q&A (when unsure), 
 [Issues](https://github.com/zjedi/hugo-scroll/issues) for tracking,

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: false
+#
 # 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/content/homepage/credits.md

@@ -3,6 +3,9 @@ title: "Credits"
 weight: 99
 header_menu: true
 ---
-In this section we give thanks to authors of resources used on this demo page.
-![Nice picture to make you pay me ;-)](images/chef-hat.png)
-{{<extlink text="Chef-hat icons created by Cuputo - Flaticon" href="https://www.flaticon.com/free-icons/chef-hat" icon="fa fa-external-link">}}
+In this section we give credit to authors of resources used on this demo page.
+
+- {{<extlink text="Chef-hat icons created by Cuputo - Flaticon" href="https://www.flaticon.com/free-icons/chef-hat" icon="fa fa-external-link">}}
+- {{<extlink text="sprinkle-of-rock-salt-on-sliced-vegetables-3209239 - Pexels" href="https://www.pexels.com/video/sprinkle-of-rock-salt-on-sliced-vegetables-3209239/" icon="fa fa-external-link">}}
+
+

exampleSite/layouts/partials/custom_header_video.html

@@ -0,0 +1,11 @@
+<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">
+    -->
+
+    {{ $videoResource := resources.Get "cover/pexels-pressmaster-3209239-960x540-25fps.mp4" }}
+    <source src="{{ $videoResource.Permalink }}" type="video/mp4">
+</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>
+-->