Archived topic
Where do I add the page hero video code?
5 replies · Started by Andy on November 11, 2021
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
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. :D
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/
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.
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?
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.
Thank you so much Elvin, got it!
No problem. Let us know if you need further help. :D
