- This topic has 12 replies, 3 voices, and was last updated 7 months, 1 week ago by Ying.
August 23, 2022 at 6:42 am #2321258Holly
I have followed this:https://docs.generatepress.com/article/background-video/
But am having no luck.
The video I need as background is coming from vimeo. The link is “https://player.vimeo.com/progressive_redirect/playback/469528695/rendition/1080p/file.mp4?loc=external&signature=fbcf4fe45592e0fccdd1a38a337868ed6e96487610346824d817898ef0d5c86c”
Thanks for any help.August 23, 2022 at 7:30 am #2321298DavidStaffCustomer Support
the URL has to be a direct link to the video.
Vimeo provides this guide on getting the direct link:
Adding CSS: http://docs.generatepress.com/article/adding-css/August 23, 2022 at 7:49 am #2321413Holly
Thanks Dave. I already followed those instructions and that is where I got the link. It is the direct link that vimeo provides. I am not sure what can be done. Any help is appreciated.August 23, 2022 at 8:09 am #2321489DavidStaffCustomer Support
Can i see the site where the background video is ?
Adding CSS: http://docs.generatepress.com/article/adding-css/August 23, 2022 at 8:19 am #2321499Holly
Oh yes. Sorry.
The image at the top of the little girl is where it should be showing. I have a still background loaded for now because the video and the poster image won’t seem to show.August 23, 2022 at 8:41 am #2321520Holly
So I can see the video now….not sure why. But it isn’t in the background.
I took off all padding and the background image that was in the container. All I have now is:
-container (with 3 headlines inside)
-custom html with video html insideAugust 23, 2022 at 9:12 am #2321546DavidStaffCustomer Support
I think it took a while for that progressive video to render from vimeo… i left it running for a few minutes before it first appeared. But now it loads immediately – which is nice 🙂
the position – can you check the CSS you added ? It looks the CSS rule before it is missing a closing
Adding CSS: http://docs.generatepress.com/article/adding-css/August 23, 2022 at 9:46 am #2321574Holly
I am using:
This is the CSS from your article.
I don’t see anything missing….the video is not responsive or in the background…August 23, 2022 at 9:49 am #2321578Holly
Yes the rule before it was missing the }. Good catch.
Now that I have added it, the video is gone completely….August 23, 2022 at 9:53 am #2321581Holly
Is the css missing a “.” before “video[poster]”? It doesn’t have one in your article. But when I add the “.” there the video moves to the background of the container below it (instead of the container that it is in).August 23, 2022 at 10:36 am #2321604YingStaffCustomer Support
The CSS is correct.
The background color of the container block which contains the background-video-content is blocking the video background.
Can you remove that background color?
Instead, if you want the background color, add it to the parent container block which contains both background video and content.August 23, 2022 at 11:15 am #2321621Holly
Aha! Thank you!
I needed a background color behind the headline text. So I needed to add another container. Now it is working. This is the hierarchy:
— Container (with background color)
– html (with background video)August 23, 2022 at 11:30 am #2321624YingStaffCustomer Support
Oh, I see what you mean, nice design, I like it 🙂
- You must be logged in to reply to this topic.