SR Video Overlay 01

This module renders a full-bleed background video with a heading, rich text description, lead text option, and a row of CTA buttons layered on top, plus a play button that opens a separate video source in a modal overlay.

Pick it over the bling graphic and bento grid modules when the section's main asset is a video rather than a static image or slider, and you want visitors to click play and watch in a popup instead of just scanning a picture. It needs a background video file or embed for the ambient loop and a distinct video source, HubSpot player, embed, or file, for the modal that opens on click.

Use cases

Full-bleed hero video background
Click to play demo video
Product launch video banner
Background loop with watch demo button
Video testimonial teaser with modal

Where it fits

Included with: Stack
Page sections: Hero, Media, CTA

Editable fields

Content tab

Field	Type	Notes
Background Video	File	Repeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers.
Background Video Tablet	File	Repeats: min 0, default 1. This background video will only be used on tablet devices.
Background Video Mobile	File	Repeats: min 0, default 1. This background video will only be used on mobile devices.
Enabled	Boolean
ID	Text	Assign a ID to the module.
Class	Text	Assign a CLASS to the module.
Description	Rich text
Lead Text	Boolean	Turn on to make the Description text larger.

Heading Repeats: default 0.

Field	Type	Notes
Heading	Text
Size	Choice	HTML heading size. Options: H1, H2, H3, H4, H5, H6, P.
Display Size	Choice	Size that heading is displayed at. 12 options, including Auto, H1, H2.
Color	Choice	15 options, including Auto, Primary, Secondary.
Color	Color
Align	Choice	Options: Auto, Left, Center, Right.
CSS Class	Text

CTA Repeats: min 0, default 0.

Field	Type	Notes
CTA Type	Choice	Options: HubSpot CTA, HubSpot Payment, Button, Modal.
CTA Style	Choice	26 options, including Primary, Secondary, Tertiary.
CTA	CTA
Button Text	Text
Modal Target	Text
Link	Link
Payment link	Payment
Checkout behavior	Choice	Options: Open in a new tab, Sliding overlay.
CTA Size	Choice	Options: Small, Default, Large.
Add icon	Boolean

CTA › Default

Field	Type	Notes
Background	Color
Text	Color
Border	Color

CTA › Hover

Field	Type	Notes
Background	Color
Text	Color
Border Color	Color

CTA › Icon

Field	Type	Notes
Icon	Icon
Position	Choice	Options: Left, Right.
Purpose	Choice	The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic.

Play Icon

Field	Type	Notes
Icon Type	Choice	Options: Icon, Image, Custom, None.
Image	Image
Icon	Icon
Icon Color	Color
Icon Background	Color	Set opacity to 0 to disable the background.
HTML	Text
Icon Size	Number
Purpose	Choice	The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic.

Modal Video

Field	Type	Notes
Video type	Choice	Options: Embed, HTML Video, HubSpot Video.
HubSpot Video	Video player
Embed	Embed
Custom Thumbnail	Image
Video File	File	Repeats: default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers.
Video Poster	Image
Show Controls	Boolean
Autoplay	Boolean
Loop	Boolean
Muted	Boolean

Modal Video › Style Options

Field	Type	Notes
Play button color	Color

Modal Video › Placeholder text

Field	Type	Notes
Video placeholder title	Text
Video placeholder description	Text

Modal Video › Close Icon

Field	Type	Notes
Close Icon	Icon
Background	Color
Icon color	Color
Purpose	Choice	The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic.

Style tab

Change log

Version	Change
2.0.0	Stardust update
1.2.1	Fixed image macro
1.2.0	Accessibility improvements
1.1.0	Added responsive background options
1.0.0	Added module