Archived topic
Video Background
5 replies · Started by Ella on July 6, 2022
I’m using the “Connections” Wedding Planner Theme (so please check that for reference)
This is the start of my new site: https://wordpress-623989-2736800.cloudwaysapps.com/
On the homepage, there is an image with a “click to play” button (on the “A great experience that…” text), but I was just wondering if I have to link to a video and that video open in a new tab, or if I can add a video that plays directly there, behind the text… I tried to upload a video as the background but it wouldn’t let me. Is there another way around it? As I really love the design looking like that.
Thanks,
Ella
Hi Ella,
It's easier to add a link to this button and open it in a new window.
If you want the button to work, some custom JavaScrip is required.
Here's an example for your reference:
https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
Linking in a new window really isn't ideal as the video is only supposed to be a little snippet welcome video. It's not really long enough to justify a whole new tab and play that way.
With the Javascript - I've tried adding the code as HTML where I want it but it doesn't work. Do I have to paste it somewhere else, perhaps in the backend? And this then enables me to upload the video in the right place? How does it work?
Also, will that not fill the entire page, as opposed to playing within a section of the page like I'm looking for it to be at the moment?
If you could provide a little more info to make it clearer, that would be much appreciated!
Thanks,
Ella
Hi Ella,
As custom JavaScript is out of the scope of our support forum, the support we can offer here is limited, thanks for your understanding!
Please refer to what support includes here: https://generatepress.com/what-support-includes/
The example I attached will need to be adapted in your case, so it requires some coding experience, if you are willing to learn, here're some resources:
https://www.codecademy.com/projects/language/html-css
https://www.codecademy.com/projects/language/javascript
Otherwise, you need to hire a developer to modify the code for you.
If you don't need the play button just the video background, here's a guide on how to do that:
https://docs.generatepress.com/article/background-video/
Update: I've found a way to do this now so all sorted!
Glad to hear that :)
