diff options
| author | Victoria Drake <hello@victoria.dev> | 2020-09-01 04:26:16 +0300 |
|---|---|---|
| committer | Victoria Drake <hello@victoria.dev> | 2020-09-01 04:26:16 +0300 |
| commit | 63c93b8f850423608053262010b61e8c2d644f1a (patch) | |
| tree | 93d2411c5220d3bc71b11d86984ce7b3e6fe22bb | |
| parent | 2b743024015576c2ba233d414ecd9e78a82117ed (diff) | |
| parent | 72c356c78f6776d11e327f5490d3892136df6394 (diff) | |
Merge branch 'arthurbailao-video-background'
| -rwxr-xr-x | README.md | 18 | ||||
| -rwxr-xr-x | assets/sass/_elements.sass | 23 | ||||
| -rwxr-xr-x | layouts/index.html | 16 |
3 files changed, 56 insertions, 1 deletions
@@ -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 index 937f293..406007d 100755 --- 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 index 3c7fcdf..7447984 100755 --- 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>
\ No newline at end of file +</html> |