Is there a way to use a video for a hero image?

Support Themes & Styling
1

I’m converting from a Wordpress site to Grav and despite a lot of head banging to try to get the Quark theme to do what the WP theme was doing (mostly got it, thanks) I still have one sticky thing:

My WP theme had the ability to do an MP4 as the hero image of a page. Grav seems to lack that ability. Is there a way to it without hard coding something in the template/blog.html.twig file?

2

You’d need to create a child theme and extend the template

3

That’s what I was afraid of. Grav looks like it would be this great simple thing on the surface, but I’ve spent weeks now recreating was was literally a few minutes of work in Wordpress. Not sure if it’s really all that worth it.

4

It depends on what you actually want and - more importantly - need. What was your reason to move to Grav? Did you do a research and consider all the differences between the two?

5

Yes, I did, thanks. I’m all set.

6

I have found a solution for QUARK that works and is right for me. “Code is poetry” does not apply to my proposal :face_with_peeking_eye:

I assume that you are working with a child theme (mytheme).

mytheme → templates → modular → videohero.html.twig:

{% set grid_size = theme_var('grid-size') %}
{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media.images|first %}
{% include 'partials/videohero.html.twig' %}

mytheme → templates → partials → videohero.html.twig:

<section id="{{ id }}" class="section modular-hero hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}" style="padding: 0;">
<!-- Background video -->
<div class="video-background-holder">
  <div class="video-background-overlay"></div>
  <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="{{ page.url|e }}/{{ page.header.video_mp4 }}" type="video/mp4">
  </video>
  <div class="video-background-content container h-100">
       <div class="image-overlay" style="height: 100vh; padding-top: 5rem;"></div>
    <section class="container {{ grid_size }}" style="text-align: {{ page.header.hero_align|default('center') }}">
    <br>
        {{ content|raw }}
    </section>
    </div>
</div>

</section>

mytheme → css → custom.css:

.video-background-holder {
  position: relative;
  background-color: black;
  height: calc(100vh - 72px);
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

.video-background-holder video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.video-background-content {
  position: relative;
  z-index: 2;
}

.video-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0;
  z-index: 1;
}

mytheme → blueprints → modular → videohero.yaml (sorry, i forgot the blueprint when i first published my solution)

title: Hero
'@extends': default

form:
  fields:
    tabs:
      fields:
        buttons:
          type: tab
          title: Hero
          fields:
            header.hero_classes:
              type: text
              label: Hero Classes
              markdown: true
              description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
            header.hero_image:
              type: filepicker
              label: Hero Image
              preview_images: true
              description: 'If not specified, this defaults to the first image found in the page''s folder'
            header.video_mp4:
              type: text
              label: Background Video (mp4 Format)
              help: URL to a mp4 video which is used as background video. If background video is played, we don't see background image.

Hope, it works :laughing:

2 Likes
7

Thanks! I’ll see what I can do with this on my site. Looks good at first glance!