Skip to content

Commit bd1b408

Browse files
victoriadrakevictoriadrake
committed
Add optional video background
- Configure exampleSite with video background - Add example of #90 with video from: https://www.pexels.com/video/bird-s-eye-view-of-ocean-waves-1918465/
1 parent 63c93b8 commit bd1b408

File tree

10 files changed

+48
-15
lines changed

10 files changed

+48
-15
lines changed

‎README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,15 +181,19 @@ Here is an example configuration of `config.toml`:
181181

182182
```toml
183183
[[params.videoBackgroud.sources]]
184-
source = "/background.mp4"
184+
source = "/background.mp4" # Your video file
185185
type = "video/mp4"
186-
poster = "/background.jpg"
186+
poster = "/background.jpg" # The image to show when the video isn't playing
187187

188188
[params.videoBackgroud]
189189
overlay = "rgba(0, 0, 0, 0.4)" # optional
190190

191191
```
192192

193+
And here is a screenshot of what that might look like:
194+
195+
![Video background main page screenshot](https://github.com/victoriadrake/hugo-theme-sam/blob/master/images/video_screenshot.png)
196+
193197
## Editing the theme
194198

195199
This theme uses [Hugo Pipes](https://gohugo.io/hugo-pipes/introduction/) to compile, autoprefix, and minify its CSS styles from the included Sass files.

‎exampleSite/config.toml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@ pygmentsCodefences = true
2121
title = "Call me Sam"
2222
# rss = ""
2323

24+
[[params.videoBackgroud.sources]]
25+
source = "/sample_video.mp4"
26+
type = "video/mp4"
27+
poster = "/background.png"
28+
[params.videoBackgroud]
29+
overlay = "rgba(0, 0, 0, 0.4)" # optional
30+
2431
[[params.mainMenu]]
2532
link = "posts"
2633
text = "posts"

‎exampleSite/content/gallery/_index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: "Photos from Tokyo"
33
type: "gallery"
44
url: "/gallery"
55
maxWidth: "800x"
6-
clickablePhotos: false
6+
clickablePhotos: true
77
---
88

99
This responsive image gallery is rendered in random order from a folder of image files. It uses Hugo's [Image Processing](https://gohugo.io/content-management/image-processing/) to automatically resize your images while preserving the full size image's aspect ratio. You can configure the gallery to open the full size image file when clicked, or not. You can set this text in the `_index.md` file in the `/content/gallery/` folder.

‎exampleSite/content/portfolio/_index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ maxWidth: "600x"
66
clickablePhotos: true
77
---
88

9-
This is another gallery of images similar to [the first one](/hugo-theme-sam/gallery). It can be called anything you want!
9+
This is another gallery of images similar to [the first one](/gallery). It can be called anything you want!

‎exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,6 @@ a {
5454
a:active {
5555
color: #cccccc; }
5656

57-
button {
58-
padding: 20px;
59-
border: 0px;
60-
border-radius: 5px;
61-
background: #fff; }
62-
button:hover {
63-
box-shadow: 5px 5px #111; }
64-
6557
hr {
6658
margin: 1rem 0;
6759
background-color: transparent;
@@ -234,10 +226,14 @@ article {
234226
display: grid;
235227
grid-gap: 20px;
236228
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
237-
grid-auto-rows: auto; }
229+
grid-auto-rows: 400px; }
238230
@media screen and (max-width: 736px) {
239231
.grid {
240232
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); } }
233+
.grid.keep-aspect-ratio {
234+
grid-auto-rows: auto;
235+
place-items: start; }
236+
241237
.grid > div {
242238
background-color: transparent;
243239
overflow: hidden; }
@@ -248,12 +244,38 @@ article {
248244
object-fit: cover;
249245
opacity: 1; }
250246

247+
.grid > div > a {
248+
border-bottom: none; }
249+
251250
.grid > div > a > img {
252251
height: 100%;
253252
width: 100%;
254253
object-fit: cover;
255254
opacity: 1; }
256255

256+
.video {
257+
position: fixed;
258+
z-index: -1; }
259+
260+
#overlay {
261+
position: fixed;
262+
height: 100%;
263+
width: 100%;
264+
top: 0;
265+
left: 0;
266+
background: rgba(0, 0, 0, 0.4);
267+
z-index: -1; }
268+
269+
@media (min-aspect-ratio: 16/9) {
270+
.video {
271+
width: 100%;
272+
height: auto; } }
273+
274+
@media (max-aspect-ratio: 16/9) {
275+
.video {
276+
width: auto;
277+
height: 100%; } }
278+
257279
.go-left {
258280
justify-content: flex-start;
259281
align-items: flex-start; }

‎exampleSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.content‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
*{margin:0;padding:0;box-sizing:border-box}html{background-color:#39424e;font-family:didact gothic,sans serif;font-size:16px}body{font-size:16px;font-family:didact gothic,sans serif;color:#fff;line-height:2rem;letter-spacing:1.5px;text-shadow:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;opacity:1}header{padding:6em 1em 1em 0}@media screen and (max-width:736px){header{padding:3em 0}}h1,h2,h3{margin-bottom:.5em;font-family:didact gothic,sans-serif;opacity:.6}li{opacity:.8}li a{opacity:.9}ul{list-style-type:none}p{display:inline}a{color:#ccc;text-decoration:none;border-bottom:2px solid #ccc;transition:.5s ease}a:hover{color:#fff;font-style:none}a:active{color:#ccc}button{padding:20px;border:0;border-radius:5px;background:#fff}button:hover{box-shadow:5px 5px #111}hr{margin:1rem 0;background-color:transparent;width:50%;border-style:solid;border-width:1px;opacity:.3}nav{margin:1em auto}.wrap{margin:0 auto;width:45%;max-width:64em}@media screen and (max-width:736px){.wrap{width:90%}}.tag-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.tag{background-color:transparent;position:relative;bottom:0}.flex-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.bottom-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.footer{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;background-color:transparent;position:relative;bottom:0;padding:1rem;font-family:didact gothic,sans serif;font-size:1rem;line-height:1em;opacity:.8}.footer a{border-bottom:none;display:contents}#splash{min-height:calc(100vh - 6em)}.big-link{font-family:didact gothic,sans serif;font-size:3rem;font-weight:300;margin-bottom:2rem;line-height:1.5em}#title{margin-top:3rem;font-family:didact gothic,sans serif;font-size:2rem;line-height:3rem;margin-bottom:2rem}article{width:100%;line-height:2em;letter-spacing:2px}article div{width:100%;height:100%;margin-bottom:1em}article h1,article h2,article h3{margin:1em 0;text-align:left}article p{display:block;margin-bottom:1em;line-height:1.6;letter-spacing:1.5px}article .highlight{width:100%}article pre{line-height:2rem;border-radius:3px;padding:1rem;overflow-x:auto;background-color:#000004;width:100%;margin-bottom:1em}article pre>code{border:none}article code{font-size:.9rem;font-family:source code pro,monospace;padding:.1rem;border-radius:3px;border:1px solid #ccc}article img{width:100%;max-width:100%;display:block;margin:2rem auto;opacity:1}article blockquote{background-color:#ccc;color:#39424e;padding:2rem;margin:2rem 1rem;border-radius:3px}article blockquote a{color:#111}article blockquote ul{margin-top:1rem}article blockquote li{list-style:disc}article table{width:100%;border-collapse:collapse;margin:1rem 0;overflow-x:auto}article table th{font-size:.9rem}article table td,article table th{padding:2px 5px;text-align:center;border:1px solid #ccc}article li{line-height:2;padding-left:.4rem}article li:last-child{margin-bottom:1rem}article ul{list-style:disc outside;padding-left:2rem}article ol{list-style:decimal outside;padding-left:2rem}article .gist{max-width:100%}article .gist td,article .gist th{text-align:left;border:0}article .gist .gist-meta{background-color:transparent;color:#fff}article .gist .gist-meta a{color:#fff}.tag{padding:.25em 0;margin-right:.5em;opacity:.6}.grid{margin:1em auto;display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-auto-rows:auto}@media screen and (max-width:736px){.grid{grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}}.grid>div{background-color:transparent;overflow:hidden}.grid>div>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.grid>div>a>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.go-left{justify-content:flex-start;align-items:flex-start}.go-right{justify-content:flex-end;align-items:flex-end}.go-center{justify-content:center;align-items:center}
1+
*{margin:0;padding:0;box-sizing:border-box}html{background-color:#39424e;font-family:didact gothic,sans serif;font-size:16px}body{font-size:16px;font-family:didact gothic,sans serif;color:#fff;line-height:2rem;letter-spacing:1.5px;text-shadow:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;opacity:1}header{padding:6em 1em 1em 0}@media screen and (max-width:736px){header{padding:3em 0}}h1,h2,h3{margin-bottom:.5em;font-family:didact gothic,sans-serif;opacity:.6}li{opacity:.8}li a{opacity:.9}ul{list-style-type:none}p{display:inline}a{color:#ccc;text-decoration:none;border-bottom:2px solid #ccc;transition:.5s ease}a:hover{color:#fff;font-style:none}a:active{color:#ccc}hr{margin:1rem 0;background-color:transparent;width:50%;border-style:solid;border-width:1px;opacity:.3}nav{margin:1em auto}.wrap{margin:0 auto;width:45%;max-width:64em}@media screen and (max-width:736px){.wrap{width:90%}}.tag-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.tag{background-color:transparent;position:relative;bottom:0}.flex-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.bottom-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.footer{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;background-color:transparent;position:relative;bottom:0;padding:1rem;font-family:didact gothic,sans serif;font-size:1rem;line-height:1em;opacity:.8}.footer a{border-bottom:none;display:contents}#splash{min-height:calc(100vh - 6em)}.big-link{font-family:didact gothic,sans serif;font-size:3rem;font-weight:300;margin-bottom:2rem;line-height:1.5em}#title{margin-top:3rem;font-family:didact gothic,sans serif;font-size:2rem;line-height:3rem;margin-bottom:2rem}article{width:100%;line-height:2em;letter-spacing:2px}article div{width:100%;height:100%;margin-bottom:1em}article h1,article h2,article h3{margin:1em 0;text-align:left}article p{display:block;margin-bottom:1em;line-height:1.6;letter-spacing:1.5px}article .highlight{width:100%}article pre{line-height:2rem;border-radius:3px;padding:1rem;overflow-x:auto;background-color:#000004;width:100%;margin-bottom:1em}article pre>code{border:none}article code{font-size:.9rem;font-family:source code pro,monospace;padding:.1rem;border-radius:3px;border:1px solid #ccc}article img{width:100%;max-width:100%;display:block;margin:2rem auto;opacity:1}article blockquote{background-color:#ccc;color:#39424e;padding:2rem;margin:2rem 1rem;border-radius:3px}article blockquote a{color:#111}article blockquote ul{margin-top:1rem}article blockquote li{list-style:disc}article table{width:100%;border-collapse:collapse;margin:1rem 0;overflow-x:auto}article table th{font-size:.9rem}article table td,article table th{padding:2px 5px;text-align:center;border:1px solid #ccc}article li{line-height:2;padding-left:.4rem}article li:last-child{margin-bottom:1rem}article ul{list-style:disc outside;padding-left:2rem}article ol{list-style:decimal outside;padding-left:2rem}article .gist{max-width:100%}article .gist td,article .gist th{text-align:left;border:0}article .gist .gist-meta{background-color:transparent;color:#fff}article .gist .gist-meta a{color:#fff}.tag{padding:.25em 0;margin-right:.5em;opacity:.6}.grid{margin:1em auto;display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-auto-rows:400px}@media screen and (max-width:736px){.grid{grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}}.grid.keep-aspect-ratio{grid-auto-rows:auto;place-items:start}.grid>div{background-color:transparent;overflow:hidden}.grid>div>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.grid>div>a{border-bottom:none}.grid>div>a>img{height:100%;width:100%;-o-object-fit:cover;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,.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%}}.go-left{justify-content:flex-start;align-items:flex-start}.go-right{justify-content:flex-end;align-items:flex-end}.go-center{justify-content:center;align-items:center}

‎exampleSite/resources/_gen/assets/sass/sass/style.sass_b1195a7e151e6f4379f823b1b2b4f87a.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"Target":"css/main.min.353ca4aba7f8dd7881fd0d5dfb3060f96bcc2f6367a8e1a2cbaba5d330d4baeb.css","MediaType":"text/css","Data":{"Integrity":"sha256-NTykq6f43XiB/Q1d+zBg+WvML2NnqOGiy6ul0zDUuus="}}
1+
{"Target":"css/main.min.6d10ea1ed2e66d431267324e2126b185c40ae2a7adb70d109ce81ce22729f1c3.css","MediaType":"text/css","Data":{"Integrity":"sha256-bRDqHtLmbUMSZzJOISaxhcQK4qettw0QnOgc4icp8cM="}}

‎exampleSite/static/background.png‎

1.63 MB
Loading

‎exampleSite/static/sample_video.mp4‎

46.1 MB
Binary file not shown.

‎images/video_screenshot.png‎

1.34 MB
Loading

0 commit comments

Comments
 (0)