[Resolved] GenerateBlock Container Video

[Eaydman]

Hi,
I want to ask if it is possible to add a background video to the containerblock ?
If not, what other possibility to I have to add a background video ?

[David]

In the current free version it would require some HTML. Using the same method applied to a page hero:

https://docs.generatepress.com/article/page-hero-background-video/

In this case you would add a HTML block inside your Container Block with this markup:

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">
    <source src="URL/TO/video.mp4" type="video/mp4">
    <source src="URL/TO/video.webm" type="video/webm">
    <source src="URL/TO/video.ogv" type="video/ogv">
</video>

Then give the Container Block an Advanced > Additional CSS class of: video-container

Then add some CSS to your site like this:

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

.video-container {
    position: relative;
    overflow: hidden;
}

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

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

It may require a little tweaking.

[Eaydman]

Thanks for your lovely support mate.
But I need different videos on my pages. So that setup is not the best well ?

I have to wait for a pro version maybe ?

[David]

I do believe its on the list for Pro version…

[Eaydman]

Thanks for info

[David]

You’re welcome

[Eaydman]

Any news about the Pro version ? 🙂

[Tom]

Not yet – getting there 🙂

[Sam]

Did background video make it into the GB Pro version? I’m not seeing it.

[David]

Hi there,

not yet – its on our roadmap

[Mike]

This code worked for me but it won’t show up on mobile, only desktop. Any ideas on how to fix it? Thanks!

I do have Generate Blocks Pro, but I didn’t see it there as an option. Is that still in the works?

[Elvin]

Hi Mike,

Can you open up a new topic?

Opening a new topic lets you use the private information text field to provide the site details of the site you’re working on. This is so we can inspect the site for you and point you to what can be done with it. 😀

[Mike]

Thanks Elvin, will do.

[Elvin]

No problem.

[Author]

Posts