Archived topic
Home Page Video Background with Header and Content
16 replies · Started by Nadine on May 5, 2020
Hi,
I need to add a video background to my home page. The header and part of the page content needs to sit on top of it. I was trying to do this with Page Hero element, but I don't see a video option. How do I accomplish this?
Thanks!
Edit: I put it up on a test site for help. I have been testing different positioning, but I need it relative to the logo. I also need to keep the logo to the left and eventually the mobile menu to the right.
Oh and I'm using Elementor
Hi there,
This is the method if you are using GP:
https://docs.generatepress.com/article/page-hero-background-video/
If you are using Elementor then you would need to create the template in Elementor then just add the shortcode as the page hero content:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-1-add-the-content
Let me know if this helps :)
Hi Leo,
Thanks for the speedy reply! I just tried it with sample template, and my header is not sitting on top of the Elementor template. I do have merge selected.
Any chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
Let me know :)
Unfortunately I'm working locally. Let me try a bit longer. If I can't figure it out I'll put it online somewhere. thanks
Sounds good. We will be here :)
Would it be possible to send you a private screenshot? I have some of it figured out, but now my Elementor content block that sits on the same header background isn't sitting correctly. It moves around and I'm not sure how to position it relative to the header elements. Does that make sense?
Screenshots really don't help with issues like this as I need to inspect the code to determine the issue.
Any chance you can make the site live or create a staging site with the issue so I can help better?
I did. I tried to edit the original topic and I added a private link. Did it not work?
Sorry it did work - you didn't mention it so I didn't check ;)
So what is the issue? This part here?
https://www.screencast.com/t/H1QnT1Kjn
No, that's from me trying a million things. It's in setting the distance that text area has from the logo. I can set the distance from the top, but it then overlaps the logo on different screen sizes and mobile.
Looks like it's controlled by Elementor.
If you reduce the padding-bottom, it should move the content closer to the top:
https://www.screencast.com/t/H42T95wq3
It is. The problem I'm having is that the logo is controlled by GeneratePress, so I can't those elements relative to the logo. It's not the padding bottom, I tried a million different things there. I'll try again tomorrow and hopefully be able to work it out then.
Sounds good.
Let me know if you need another look.
