[Resolved] How do I Make My Home/Global Header a Video?

[Suzanna]

Hi,
I’m running GP premium on a site. I used a download, pre-built site structure from GP on my website, and the large background picture on the homepage is set up via the Global and Home Header sections under Appearance>Elements section. I’d like to change the picture to a looped video, but the video file I uploaded does not show up in the media options where you change those videos.
Thank you!

[Leo]

Hi there,

This should help:
https://docs.generatepress.com/article/page-hero-background-video/

Let me know 🙂

[Suzanna]

Hi!
Thanks for this answer – it did help, but it isn’t working. I’ve entered the HTML especially where it says to in the article – it looks like this:
<video loop muted autoplay poster=”https://twinbuttesranch.com/wp-content/uploads/2019/03/Arizona-2018-Twin-Buttes-Ranch-260-Jepeg.jpg/TO/poster.jpg&#8221; class=”background-video”>
<source src=”https://twinbuttesranch.com/wp-content/uploads/2020/02/Ranch-video-no-loop.mp4/TO/poster.jpg/TO/video.mp4&#8243; type=”video/mp4″>
</video>
But when I tried to add the CSS it wrote it on the homepage.
Either way, the video does not play, and when I add the HTML in the Elements content section (under the <h1> tags, right?) it just moves the site header/call-to-action off center.
Obviously I’m missing a step…thanks again!

[David]

Hi there,

where are you adding the CSS Code?

[Suzanna]

I tried adding it into the Elements content area, then into the Elements classes area – I couldn’t see any other place to add it.

[Leo]

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Suzanna]

OK, thanks again! Progress. The Simple CSS plugin loaded up and is working great. I copy/pasted the CSS from the help article https://docs.generatepress.com/article/page-hero-background-video/ and put the HTML code into the elements content area on both the Home and Global header areas…
The button is no longer showing up sideways, and the code isn’t writing on the visible homepage, but the video still won’t play?
I have the original homepage image still set to Featured Image, by the way, I’m not sure if that would make a difference.
Thank you so much!

[David]

The src line in your HTML eg.:

<source src="URL/TO/video.mp4" type="video/mp4">

is incorrect. Try replacing it with this:

<source src="https://twinbuttesranch.com/wp-content/uploads/2020/02/Ranch-video-no-loop.mp4" type="video/mp4">

[Suzanna]

Hi again,
Thanks guys so much! The video is playing, and I think I can figure it out from here. You’re the absolute best 🙂

[David]

Glad we could be of help

[Author]

Posts