Merge branch 'arthurbailao-video-background'

victoriadrake · Sep 1, 2020 · 63c93b8 · 63c93b8
2 parents 2b74302 + 72c356c
commit 63c93b8
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ Focused on content and typography, the stylized index page is really just a list
 - Customize
   - Custom navigation menu set via `config.toml`
   - Custom footer text
+  - Custom background video via `config.toml`
 - Developer-approved
   - Syntax highlighting
   - Share-ready pages with [Open Graph](https://gohugo.io/templates/internal/#open-graph) and [Twitter](https://gohugo.io/templates/internal/#twitter-cards) metadata you can customize in `config.toml` and page front-matter
@@ -172,6 +173,23 @@ content/
 
 That's it! Sam's gallery layout template will automagically build the page from your images.
 
+## Custom video background
+
+To change the default home page background to a looping video, you need to set a list of video sources and optionally an overlay color (default: `rgba(0, 0, 0, 0.4)`).
+
+Here is an example configuration of `config.toml`:
+
+```toml
+[[params.videoBackgroud.sources]]
+    source  = "/background.mp4"
+    type    = "video/mp4"
+    poster  = "/background.jpg"
+
+[params.videoBackgroud]
+    overlay = "rgba(0, 0, 0, 0.4)" # optional
+
+```
+
 ## Editing the theme
 
 This theme uses [Hugo Pipes](https://gohugo.io/hugo-pipes/introduction/) to compile, autoprefix, and minify its CSS styles from the included Sass files.

diff --git a/assets/sass/_elements.sass b/assets/sass/_elements.sass
@@ -136,3 +136,26 @@ article
     width: 100%
     object-fit: cover
     opacity: 1
+
+.video
+    position: fixed
+    z-index: -1
+
+#overlay
+    position: fixed
+    height: 100%
+    width: 100%
+    top: 0
+    left: 0
+    background: rgba(0,0,0, 0.4)
+    z-index: -1
+
+@media (min-aspect-ratio: 16/9)
+    .video
+        width: 100%
+        height: auto
+
+@media (max-aspect-ratio: 16/9)
+    .video
+        width: auto
+        height: 100%
diff --git a/layouts/index.html b/layouts/index.html
@@ -7,6 +7,20 @@
 </head>
 
 <body>
+    {{ with .Site.Params.videoBackgroud }}
+        <video class="video" autoplay muted preload loop playsinline>
+            {{ range .sources }}
+                <source
+                    src="{{ .source }}"
+                    type="{{ .type }}"
+                    poster="{{ .poster }}" />
+            {{ end }}
+        </video>
+        {{ with .overlay }}
+            <div id="overlay" style="background: {{ . | safeCSS }};"></div>
+        {{ end }}
+    {{ end }}
+
     <nav role="navigation" class="flex-container" id="splash">
 
         {{ if .Site.Params.mainMenu }}
@@ -27,4 +41,4 @@
     </nav>
 </body>
 
-</html>
+</html>