Hello Everyone,
Just started to dive in Grav and I want to have a Big-picture theme that is able to show fullscreen video on background with parallax effect.
Today I read all Grav documentation and started to play around with html.twig files and Css.
I modified intro.html.twig from template/modular, adding a full screen video :
---html
{% set subpages = page.find('/home').header.content.order.custom %}
{% set nextSubPageIndex = -1 %}
{% for subpage in subpages %}
{% if page.folder == subpage %}
{% set nextSubPageIndex = loop.index %}
{% endif %}
{% endfor %}
{# Here I added the fullscreen video#}
<section id="{{ page.folder|replace({'_': ''}) }}" class="main style1 dark fullscreen">
<video autoplay mute loop poster="onde.jpg" id="bgvid">
<source src="movie.webm" type="video/webm">
<source src="user/pages/01.home/_video/movie.mp4" type="video/mp4">
</video>
<div class="content container 75%">
<header>
<h2>{{ header.heading }}</h2>
</header>
{{ content }}
{% if subpages[nextSubPageIndex] %}
<footer>
<a href="#{{ subpages[nextSubPageIndex]|replace({'_': ''}) }}" class="button style2 down">More</a>
</footer>
{% endif %}
</div>
</section>
And here the Css part that I added:
/ Video fullscreen background /
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(onde.jpg) no-repeat;
background-size: cover;
}
Well, the video is there, the size is sstill something to working out, but still can't have the text on the top of the video and parallax effect I still didn't tried yet.
I would appreciate any suggestions, I'm just a bricoleur, self-taught coder.