[Support request] how to insert a background video BEHIND a container with grids and content

[Gabriel]

I have successfully inserted a background video but it’s on top of content instead of behind content. I’m sure it’s an easy fix but would love help.

Thanks!
Gabe

[David]

Hi there,

refer back to the docs on this:

https://docs.generatepress.com/article/background-video/#step-3

Where you see step 3 and the headline block:

1. replace the headline for a Container block.
2. make sure that Container Block had the background-video-content class in Advanced > Additional CSS.
3. Move all your Grid blocks and other content inside that Container block.

[Gabriel]

Still not working. Please help.

[Ying]

1. Remove the class from container b, add it to container a.

2. Drag the HTML (video) out from container b to container a, please refer to the screenshot: https://www.screencast.com/t/ErU0dIYIQWfL

3. Your CSS is missing a dot so the CSS don’t work.
https://www.screencast.com/t/Vu1lCCjsfIX

[Gabriel]

Thank you! Now how come the grid formatting is off? It looks right in the back-end but not in the front end.

[Fernando]

Hi Gabriel,

Which Grid are you referring to? The one that looks off from my end is the stars.

For this, can you try using a GB Grid Block? Or, you can also try creating this through just GB Headline Blocks. Example: https://share.getcloudapp.com/QwujEr9p

[Gabriel]

That section – with the background video and the text “The all in one toolkit…” – how can we make that run full width?

[Fernando]

You can select the Container Block, and set it to Fullwidth through the toolbar settings. Example: https://share.getcloudapp.com/2Nu6wZlR

[Gabriel]

Thanks for the tip about the stars! Very helpful.
How can I make the video stretch full width across the container?

[Fernando]

You’ll need to set the Inner Container to Full Width. Reference: https://docs.generateblocks.com/article/container-overview/#inner-container

[Author]

Posts