How to Add Background Video to a Container in GenerateBlocks

Recently, I discovered that you can actually add background videos using GenerateBlocks. It does take a few extra steps, including pasting in some HTML and CSS, but the documentation from GenerateBlocks makes it super easy. Today, I’m going to show you exactly how to follow it.

Step 1: Setting Up the Background Video

On my demo site, I’ve got my homepage hero section, and I want to replace the background image and gradient with a background video. I’ve already selected a stock video from Envato Elements, so now we’ll start by editing the page.

Once again, I’m following the documentation from GenerateBlocks on how to add a background video.

The first step in this process is to add a Container block. I already have an existing container, so I’ll open up my panel. Inside the outer container block, you need to add a Custom HTML block.

Now, I’m going to copy all the HTML code provided by GenerateBlocks, paste it into the HTML block, and make sure that it’s placed inside the outer container, not an inner container. If you have an inner container for your content, move the HTML block above it.

Step 2: Updating the Video Source & Poster Image

Next, we need to replace the content URLs in the HTML.

1. Poster Image:
   • This image appears while the video is loading.
   • I’ll go to my media library and select the image that was previously used as the background.
   • Copy the image URL and replace the placeholder in the HTML.
2. Video File:
   • The GenerateBlocks HTML includes three different video formats: MP4, WebM, and OGV.
   • My video is an MP4, so I’ll copy that URL and paste it into the correct <source> tag.
   • I’ll remove the other two formats since they are not needed.

Step 3: Adjusting the Parent Container Settings

Now, we need to check the parent container settings to follow the GenerateBlocks guidelines.

• Set Display to Flex.
• Set Direction to Column.
• Set Justify Content to Center.
• Set Z-Index to 1.
• Ensure a Min Height is set that suits the video. In my case, it’s already set to 800px, so I’ll leave it as is.

Step 4: Configuring the Inner Container

If you want to overlay text on top of the background video, you’ll need to take these extra steps:

1. Add a CSS Class
   • In the Advanced tab of the inner container, enter the class:cssCopyEditbackground-video-content
2. Update Z-Index
   • Set Z-Index to 2 so the text appears on top of the video.

Step 5: Removing the Existing Background

Since the video will serve as the background, I need to remove the background image and gradient that were previously applied.

• I’ll keep a fallback background color in case the video or poster image doesn’t load properly.

Now, I’ll save the page and refresh the site.

Step 6: Adding the CSS

Right now, I can see the video playing, but my text block is positioned at the bottom instead of overlaid on top. That’s because there’s one more crucial step—adding CSS.

1. Open Customizer → Additional CSS.
2. Paste in the CSS provided by GenerateBlocks.
3. Save & publish.

Now, the video and text are properly aligned!

If needed, I can adjust the opacity of the overlay to maintain proper contrast between the video and the text.

Step 7: Considering Accessibility

One important factor when adding background videos is web accessibility. There are specific guidelines that require users to have control over autoplaying videos.

To improve accessibility, I can modify the HTML and add controls:

<video autoplay muted loop playsinline controls>

This will allow users to pause and play the video when they hover over it. It’s not the cleanest solution, but it ensures compliance with accessibility guidelines.

Final Thoughts

That’s how you can add a background video in GenerateBlocks! While it’s not as intuitive as a simple background image, the process is fairly straightforward with a bit of HTML, CSS, and a few container tweaks.