[Support request] Replace Header Image in Homepage with Video

[Kathy]

Can I hard code the code below in files on the server such as in the header.php? I do not understand how to create Elements to replace my homepage image with a video. The instructions are not clear to me on what to add in Elements to make this work. What do I put in the “Your Element content in here” code below? – I am totally lost on how to do something this simple in the theme.

I cannot share a link because I am using the Stagging plugin to rework a website.

<video loop muted autoplay poster=”https://MY-WEBSITE-LINK.org/video/NH-cathedral-labyrinth.jpg&#8221; class=”background-video”>
<source src=”https://MY-WEBSITE-LINK.org/video/Woods.mp4.webm&#8221; type=”video/webm”>
</video>

Your Element content in here.

Can someone PLEASE help me get this working??

Thank you.

[Leo]

Hi there,

Try following the instructions here:
https://docs.generatepress.com/article/page-hero-background-video/

The first block of code goes into the Elements content.

The second block of code is CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Kathy]

Thank you Leo for responding so quickly especially on a weekend!
Okay…this is the page I was reading. Do I need to add or change any of the settings in the Elements? Just place the above code (changed of course to my settings) in the content area in Elements? So sorry but I need “baby steps”.

[Leo]

Simply changing the URL to the video should work.

[Kathy]

I got this in the top of the Element page when I added my code:

“This element needs a location set within the Display Rules tab in order to display.”

What location do I add in the Display Rules tab?

[Leo]

That would be where you want that header element to be displayed.

Take a look at this:
https://docs.generatepress.com/article/header-element-overview/#display-rules

[Kathy]

Okay…here is what I have so far.

Added the code in Elements like this:

<video loop muted autoplay poster=”https://MY-SITE.org/video/NH-cathedral-labyrinth.jpg&#8221; class=”background-video”>
<source src=”https://MY-SITE.org/video/Woods.mp4.webm&#8221; type=”video/webm”>
</video>

I added a fall back image in Elements.
I set location to homepage.
I added the css to server child theme stylesheet.
I removed featured image from the actual homepage.

Now I am getting a grayed out block where the video should go.
What do I do now?

[Leo]

Really hard for us to tell without seeing the site live unfortunately.

Any chance you can duplicate it on a live server?

Let me know 🙂

[Author]

Posts