hq/setto.basspistol.com
hq/setto.basspistol.com
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix video

Browse source
This commit is contained in:
sakrecoer 2020-08-10 12:47:49 +02:00
parent 2759e9cb27
commit 7062f902a9
4 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/header.html
View file

@ -1,4 +1,4 @@
<header class="hero" style="background-image: url({{ page.image }});"> <header class="hero" {% unless page.video_path %}style="background-image: url({{ page.image }});"{% endunless %}>
<div class="textcontainer"> <div class="textcontainer">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<p>{{ page.description }}</p> <p>{{ page.description }}</p>

6
_layouts/default.html
View file

@ -40,7 +40,11 @@
{% endunless %} {% endunless %}
{% include cookie-consent.html %} {% include cookie-consent.html %}
{% include scripts.html %} {% include scripts.html %}
<div class="fullscreen-bg">
<video autoplay muted loop poster="{{ page.image }}" class="fullscreen-bg__video">
<source src="{{ page.video_path }}" type="video/mp4">
</video>
</div>
</body> </body>
</html> </html>

5
_sass/_layout.scss
View file

@ -19,6 +19,7 @@ body {
-webkit-transition: filter 400ms ease-in; -webkit-transition: filter 400ms ease-in;
-moz-transition: filter 400ms ease-in; -moz-transition: filter 400ms ease-in;
transition: filter 400ms ease-in; transition: filter 400ms ease-in;
z-index: 1;
} }
.content-wrapper { .content-wrapper {
@ -88,6 +89,7 @@ section {
-webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt); -webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
-moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt); -moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
box-shadow: inset 0px 23px 25px -25px _palette(border-alt); box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
z-index: 2;
h2 { h2 {
text-align: center; text-align: center;
} }
@ -96,6 +98,8 @@ section:first-of-type {
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
margin-top:0;
padding-top: 40px;
} }
footer { footer {
display: flex; display: flex;
@ -110,6 +114,7 @@ footer {
background-repeat: repeat-x; background-repeat: repeat-x;
background-position: top; background-position: top;
box-sizing: border-box; box-sizing: border-box;
z-index: 2;
div { div {
flex: 0 1 280px; flex: 0 1 280px;
margin:20px; margin:20px;

24
_sass/_videos.scss
View file

@ -4,17 +4,24 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
z-index: -100; z-index: 0;
background: #fff; background: _palette(bg);
top: 0;
left: 0;
right: 0;
z-index: 0;
} }
.fullscreen-bg__video { .fullscreen-bg__video {
background: #fff; object-fit: cover;
position: relative; width: 100vw;
left: 50%; height: 100vh;
top:50%; position: absolute;
transform: translate(-50%, -50%); top: 0;
width: 100%; left: 0;
} }
#myVideo { #myVideo {
position: absolute; position: absolute;
@ -22,4 +29,5 @@
bottom: 0; bottom: 0;
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;
} }