Video Background for Bricks Builder

Customize your video background using the controls below
Add your default video URL (this will be used for all divs without specific attributes)
Optional: Add additional video URLs - each will generate a unique attribute like data-video-1, data-video-2, etc.
Click Copy JS to copy the JavaScript code to clipboard
In Bricks Builder, add a Code element and paste the JavaScript code
For each section where you want a video:
- Go to Section → Style → Attributes
- To use the default video: add only data-video-background
- To use a specific video: add the corresponding attribute (e.g., data-video-1, data-video-2)
- Leave the attribute value field empty

Interactive Video Preview

Video URLs

Default Video URL

Multiple Videos

Add additional video URLs below. Each one gets a unique attribute you can copy and use in Bricks Builder.

Autoplay on Load

Loop Video

Overlay Settings

Overlay Color

HEX

HSL

Overlay Opacity

0.3

Video Filters

Brightness

100%

Contrast

100%

Saturation

100%

Blur

0px

Hue Rotate

0°

Sepia

Grayscale

Invert

Control Settings

Show Controls

Play Button Style

Button Position

Button Color

HEX

HSL

Show Progress Bar

Show Time Remaining

Playback Options

Playback Speed

Start Time (seconds)

Fade In Duration (seconds)

Fade Out Duration (seconds)

Pause When Out of View