Is a Video Background Possible in a Column?

Beaver Builder
1

Hi Beaves,

I would like to know if it is possible to add a video background to a Column somehow. As it seems to stand now, one can only add content atop a video… if that video takes up the entire width of the page. (AKA: as a Row background)

I’d really be ok with a just the standard column configured with the video module, but the video module has the black bars on the top and bottom and if that is not unsightly enough… it also has the large play controls at the bottom.

Thanks to whomever has some insight or suggestions!

If this topic is in the wrong place in this forum, feel free to punt it elsewhere.

1 Like
2

I would be interested in an answer to this question as well. Is there a hack to make this possible?

3

I also need column video background.

4

Do no one have an answer?

5

Has there been an update to this?

6

I was able to accomplish this with the help of ChatGPT.

To add a video as the background for a column in Beaver Builder, you can achieve this with some custom CSS. Here’s how you can do it:

Step 1: Add the Video Element

  1. Edit the Page: Open the page you want to edit with Beaver Builder.
  2. Add HTML Element: Add an HTML module at the top of the column where you want the video background.

Step 2: Insert HTML for the Video

In the HTML module, insert the following code:

<video class="column-video-background" autoplay muted loop>
  <source src="URL_TO_YOUR_VIDEO.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Replace URL_TO_YOUR_VIDEO.mp4 with the URL of your video file.

Step 3: Add Custom CSS

Now, you need to add some custom CSS to make the video behave as a background. You can add this CSS to your theme’s custom CSS area or in Beaver Builder’s CSS section.

/* Ensure the column has a position relative */
.fl-col-content {
  position: relative;
  overflow: hidden;
}

.column-video-background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1; /* Ensure it is behind the column content */
  pointer-events: none; /* Ensure it does not interfere with user interactions */
}

Step 4: Ensure Positioning of Video

Make sure that the column where you want the video background is set to position: relative; so that the video is correctly positioned.

Step 5: Save and Preview

  1. Save the Changes: Save the changes in Beaver Builder.
  2. Preview the Page: Preview the page to see the video background in action.

By following these steps, you can add a video background to a column in Beaver Builder while keeping the rest of the column content as it is, without wrapping it inside the HTML module. This approach keeps your existing modules in place and only adds the video as a background element.

7

Would love to see this feature be added. The code workaround above (and some others I tried) didn’t work in my case. Thank you!