[Resolved] Where do I add the page hero video code?

[Andy]

Hi there,

I’ve been reviewing this help file:
https://docs.generatepress.com/article/page-hero-background-video/

1. Although, I don’t understand where to add this code in the Element?

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">
    <source src="URL/TO/video.mp4" type="video/mp4">
    <source src="URL/TO/video.webm" type="video/webm">
    <source src="URL/TO/video.ogv" type="video/ogv">
</video>

<div class="background-video-content">
    Your Element content in here.
</div>

2. Can I also overlay the video with a Headline? “Welcome to our site”

3. How do I control the hieght size of the video page hero on the homepage?

Screenshot here, where do I add the code on this page? Thank you

View post on imgur.com

[Elvin]

Hi Andy,

Place a Container block first to serve as the Page Hero’s main container.

Within this container, add a Custom HTML block.

On this Custom HTML block you can place the code you’ve provided. 😀

Note: That’s just one part of it. As for the CSS, here’s how to add it to your site –
https://docs.generatepress.com/article/adding-css/

[Andy]

1. Thank you, how do I control the height size of this container? The video just expands like crazy on the homepage. I tried playing with the padding of the container but nothing responds to make it smaller. Thoughts? I shared the URL.

View post on imgur.com

2. I’ve also kept my homepage content intact in order to show a button and headline. That is correct logic right? If I want to overlay content on the video?

View post on imgur.com

[Elvin]

1. Thank you, how do I control the height size of this container? The video just expands like crazy on the homepage. I tried playing with the padding of the container but nothing responds to make it smaller. Thoughts? I shared the URL.

Consider adding page-hero-wrapper on your Container Element’s Additional CSS Class(es) text field on the Advanced tab.

you then add this CSS:

.page-hero-wrapper { position: relative; }

This is so the video is bounded relative to the page-hero section only.

2. I’ve also kept my homepage content intact in order to show a button and headline. That is correct logic right? If I want to overlay content on the video?

Yes that should be fine.

[Andy]

Thank you so much Elvin, got it!

[Elvin]

No problem. Let us know if you need further help. 😀

[Author]

Posts