Customizing Big-Picture for having Big-Video

Archive
1

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#}

{{ header.heading }}

  {{ content }}

  {% if subpages[nextSubPageIndex] %}
  <footer>
      <a href="#{{ subpages[nextSubPageIndex]|replace({'_': ''}) }}" class="button style2 down">More</a>
  </footer>
  {% endif %}
```

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.