Archived topic
Video Background Help
12 replies · Started by Tim on April 13, 2022
I've tried going through this option and It is just not working for me.
Can you please send me some step by step on how to create a video background as a hero image on the home page? Does this same logic apply to any container?
Where do I add the HTML? Can I have a text overlay?
This is the link that I've tried following and it's not working. I have a youtube video I want to embed.
Thank you!
https://docs.generatepress.com/article/page-hero-background-video/
Hi Tim,
The page hero referred in this article is a Header element which can be created at appearance > elements.
Your text overlay would be replacing this line in the HTML:Your Element content in here.
I see but still can not get it to work. Does this work for a YouTube video?
Take a look: http://carolyns6.sg-host.com/
I'm not seeing a header element in your site, can you make sure you are using a header element not block element？
It is marked as a header element. Can I attach a screenshot or something?
You can upload your screenshot here: https://postimages.org/
Send us the link.
Can I share login info with you have have you create one real quick that I can use as an example for the rest of my projects?
1. Your video source should be a URL end with .mp4or .webm or .ogv, the YouTube embed code won't work.
2. Try add top and bottom padding 200px in the header element.
3. Change the location to front page instead of page > home.
If you want, you can share login info in the private info field, it will only be seen by the support team.
It could be possible to include PLAY and PAUSE controls for video?
That'll require some custom JavaScript which is out of the scope of the support forum unfortunately.
But I found an example that you can have a look at:
https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
The code needs to be adapted according to your HTML structure.
Thanks for share link.
No problem :)
