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

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?

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

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.

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?

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

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 😆

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

@idna:
videohero.yaml

Hi,

I currently have the default “Quark” theme activated. I followed all the steps you mentioned in your reply, but unfortunately nothing is showing up in the Hero section. Also, when I visited the “Themes” page, I couldn’t find any theme named “mytheme”. Could you please help me figure out what’s missing.

As I mention in the instructions, I assume that you have installed a child theme (mytheme). You must create the directories mentioned there and create/copy the necessary files into them.

I’m just created the dirs as you instruct, and created the necessary files into it, but I didn’t see the theme inside Themes page!

@ghorabws, Creating a child theme takes a little bit more then creating directories...

Install the devtools plugin and run $ bin/plugin devtools new-theme. See the docs on customising themes: https://learn.getgrav.org/17/themes/customization#inheriting-using-the-cli

@pamtbaau:
$ bin/plugin devtools new-theme

Hi,

I run Grav on a shared CPanel hosting, and I have installed Devtools via “Plugins” page, but when I’m trying to add Base Theme with the command:

bin/plugin devtools new-theme

I got the following error:

[username@server bin]$ bash plugin devtools new-theme
plugin: line 2: ?php: No such file or directory
plugin: line 4: /bin: Is a directory
plugin: line 5: syntax error near unexpected token (' plugin: line 5: * @copyright Copyright (c) 2015 - 2025 Trilby Media, LLC. All rights reserved.’

please notice that I have the file “plugin” inside the “bin” folder!.

@ghorabws, Please try as mentioned in the docs: $ bin/plugin devtools new-theme.

$ bash plugin devtools new-theme will throw error as shown
$ ./plugin devtools new-theme will throw Grav error "FATAL: Must be run from ROOT directory of Grav!"

@pamtbaau:
bin/plugin devtools new-theme

Now I’m trying the following, in the “Grav” root directory:

bash bin/plugin devtools new-theme

gives the error:

bin/plugin: line 2: ?php: No such file or directory
bin/plugin: line 4: /bin: Is a directory
bin/plugin: line 5: syntax error near unexpected token (' bin/plugin: line 5: * @copyright Copyright (c) 2015 - 2025 Trilby Media, LLC. All rights reserved.’

Command bin/plugin devtools new-theme

gives the error:

-bash: bin/plugin: Permission denied

I find it easiest on shared hosting to just spin a local env, do what you need and then upload /user to your server

Hi, thanks for your reply!

Could you recommend a good local env software that works well on Windows?

Also, would uploading /user, /bin, and their subdirectories from the local env to the server typically cause any issues?

I never had any issues with Laragon

You only need to care about /user, but check configs that are related to the domain. See the docs how to separate local config from prod