Marketplace
Important! This documentation is old, and a lot has changed in HubSpot since we released Act version 1. If you are still using Act version 1 we recommend saving these pages for later reference. This documentation will be deleted soon.

How to add a video background to the Hero banner

See a live demo

To enable this functionality, you need to add at least a One-Line of Text module inside the Hero Wrapper group, with the class: 

video-url
This is the module where you will include your video file URL. Basically, only the MP4 (.mp4) video format is required, but if you want to support multiple video formats (e.g. WebM, Ogg), you can add one module for each format.

Here is a step-by-step video tutorial, in two parts, one showing what to do at the template level, and the other one showing what edits you need to make at the page level:

Part 1: Edit the template

WATCH VIDEO

  1. Open your Act template containing a Hero Banner in Design Manager
  2. Add a One Line of Text module inside the Hero Wrapper group
  3. Name your new module Video URL and delete the default text
  4. Add this class to the Video URL module:
    video-url
  5. Publish your changes

After publishing the changes, a new option will be available at the page level under the BODY MODULES section, named Video URL. Please watch the entire next video to learn what edits you need to make at the page level.

Part 2: Edit the page

WATCH VIDEO

Important note:

In order for the video functionality to work properly you need to comply with the following best practices:

  • The video file must be smaller than 5MB (MP4 format required)
  • A poster image with the first frame of the video must be set in the Hero banner background image module. This will be displayed on older browsers and mobile devices that don't support video background functionality.
  • The Hero banner background fixed option must be set to “no”