Cover video - exampleSite

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,

exampleSite/content/_index.md

@@ -3,7 +3,7 @@
 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
+header_use_video: false
 #
 # Optional header logo. CSS: `#blog-logo`, with max-height defined, optimize to prevent scaling
 header_logo: "images/chef-hat.png"

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

@@ -1,6 +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>