[Resolved] Background video from Vimeo

[Holly]

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.

[David]

Hi there,

the URL has to be a direct link to the video.
Vimeo provides this guide on getting the direct link:

https://vimeo.zendesk.com/hc/en-us/articles/224823567-Direct-links-to-video-files

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Holly]

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.

[David]

Can i see the site where the background video is ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Holly]

Oh yes. Sorry.
https://gc.fresheggs.biz/

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.

[Holly]

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
-container (with 3 headlines inside)
-custom html with video html inside

[David]

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 }

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Holly]

I am using:
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}

.background-video-content {
position: relative;
z-index: 1;
}

video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}

This is the CSS from your article.
I don’t see anything missing….the video is not responsive or in the background…

[Holly]

Yes the rule before it was missing the }. Good catch.
Now that I have added it, the video is gone completely….

[Holly]

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).

[Ying]

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.

[Holly]

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
– Container
— Container (with background color)
— Headline
— Headline
— Headline
– html (with background video)

[Ying]

Oh, I see what you mean, nice design, I like it 🙂

[Author]

Posts