Video Background

Adding a Video Background to a Content Section

If you want to add a video background to your Content Section add a One Line of Text and an Image module at the top of your group:

Act2 Template Builder Video Background Modules

We will name them Video URL and Background Image:

Act2 Template Builder Video Background Edit Label

Act2 Template Builder Video Background Name

Act2 Template Builder Video Background Modules Renamed

Then add this class to your Video URL module: video-url

Act2 Template Builder Video URL CSS

Act2 Template Builder Video URL Class

And this class to your Background Image module: bg-img

Act2 Template Builder Video Background Image Edit CSS

Act2 Template Builder Video Background Image CSS Class

Note: Parallax background is not supported with the Video Background.

Now you can go to File Manager and upload your video. It must be MP4 format and we recommend a file smaller than 5MB.

Copy the file URL and add it to your Video URL module:

Act2 File Manager Copy Video URL

Act2 Template Builder Video URL Edit Options

Act2 Template Builder Video URL Path

You will also need an image with the first frame of your video to show until your video starts playing and as a backup on older browsers that don't support videos playing in background.

You need to add this image on the Background Image module we previously described.

Act2 Template Builder Video BG Image Edit Options

Act2 Template Builder Video Bg Replace Img

Because they are applied as backgrounds these modules are not visible in the page editor, so you need to find them in the Edit modules sidebar (a good reason to choose recognizable names for your modules):

Act2 Page Editor Edit Modules Button

Adding a Video Background to a Hero Banner

Act2 Hero Banner is a custom module, so its content is editable at the page level and not in the template.

Edit your page and click the Hero Banner area in the page preview, or find it in the modules sidebar on the left:

Act2 Page Editor Edit Hero Banner

Along with your video you would need an image with the first frame of your video to show until your video starts playing and as a backup on older browsers that don't support videos playing in background. Upload and select that image here:

Act2 Page Editor Hero Banner Background Image

Now you can go to File Manager and upload your video. It must be MP4 format and we recommend a file smaller than 5MB.

Copy the file URL and add it to your Video URL module:

Act2 File Manager Copy Video URL

Act2 Page Editor Hero Banner Video URL

Using Act2.1 with the new Design Tools? Read this documentation.