SaaSFlowDocs
Live demo

Module · Video

Video Showcase

A large video with a play button that opens in a lightbox or plays in place.

65 settingsPagesBlog postsBlog listings

Where it is used

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

SettingTypeWhat it does
Eyebrow textTextShort label shown above the heading, such as a category or theme.Default: SEE SAASFLOW IN ACTION
HeadingTextType | where you want a new line, and wrap words in [square brackets] to highlight them.Default: Smarter tools. | Faster growth.
DescriptionRich textSupporting text. Keep it to one or two sentences for best results.
Checklist itemsText
Button linkLinkWhere the button goes.
Button: HubSpot CTA IDTextOptional. To use a HubSpot CTA instead of the button (so HubSpot tracks its views and clicks), paste the CTA's ID here. Find it in Marketing > CTAs: open the CTA and copy the number from the page address. Needs HubSpot's CTA tool. Leave empty to use the button.
Button textTextText on the button. Leave empty to hide the button.Default: Watch 2 min demo
Video cover imageImageRecommended: a PNG, JPG or WebP under 1MB. Add alt text that describes the image.
Video fromChoiceLeave the video empty to hide the play button.Options: Video link (YouTube, Vimeo, Wistia, Loom, Dailymotion or an MP4 link)Upload a video file (MP4 or WebM)Embed code or other providerDefault: Video link (YouTube, Vimeo, Wistia, Loom, Dailymotion or an MP4 link)
Video linkLinkYouTube, Vimeo, Wistia, Loom or Dailymotion, or a direct link to an .mp4, .webm or .mov file.
Video fileFileAn MP4 or WebM from the File Manager. Keep it short and light (under 20 MB) so it starts quickly.
Video embedEmbedPaste a video link from any oEmbed provider, or switch to HTML and paste the provider's embed code (Wistia, Vidyard, Brightcove, JW Player and others).
How the video playsChoiceThe loop works with uploads, MP4 links, YouTube, Vimeo, Wistia and Dailymotion; embed code plays in place instead. Visitors who prefer reduced motion see the cover image.Options: In a pop-up when the play button is clickedIn place of the cover image when the play button is clickedMuted on a loop, starting on its own (no play button)Default: In a pop-up when the play button is clicked
Play button label (for screen readers)TextRead out by screen readers for the play button.Default: Play the SaaSFlow demo video
Close button label (for screen readers)TextRead out by screen readers for the button that closes the video pop-up.Default: Close video
Floating cardsRepeater · 3 settings

Up to 3 cards. Card 1 sits top left, card 2 middle left, card 3 bottom right.

Icon (optional)ImageUpload a small icon (SVG or PNG). Leave empty to use the built-in icon for this card.
Library iconIconOr pick an icon from the Font Awesome library. Used when no image is chosen above.
TextTextShort text on the card.

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

SettingTypeWhat it does
LayoutGroup · 6 settings
Color modeChoice"Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site
Transparent backgroundOn/offRemoves this section's background so the page background shows through. Useful for blending sections together.Default: Off
Eyebrow styleChoice"Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme
Video positionChoiceWhich side the video sits on.Options: LeftRightDefault: Left
Top spacingNumberSpace above the content.Default: 96
Bottom spacingNumberSpace below the content.Default: 96
TypographyGroup · 5 settings

Empty colors use the theme's brand colors.

Eyebrow colorColorLeave empty to use the theme primary color.
Heading colorColorLeave empty to use the theme heading color.
Heading size (desktop)NumberLeave empty to use the theme H2 size (Theme settings > Typography > Font sizes).
Description and checklist colorColorLeave empty to use the theme body text color.
Description sizeNumberLeave empty to use the theme subheading size (Theme settings > Typography > Font sizes).
FontsGroup · 2 settings
Heading fontFontStarts as the theme's heading font. Change it to use another font in this module only.Default: Outfit
Text fontFontStarts as the theme's body font. Change it to use another font in this module only.Default: Inter
BackgroundGroup · 2 settings
Section backgroundColorLeave empty to use the theme colors for the current light or dark mode.
Glow behind videoColorSet opacity to 0 to remove the glow.Default: #6366F1
Background animationChoiceA subtle moving background behind this section. Soft bubbles: glass circles floating. Aurora: large blurred color clouds drifting. Dot grid: a faint dotted pattern drifting. Ripples: soft rings spreading out. Brand colors only; still for visitors who turn off motion.Options: NoneSoft bubblesAurora glowDrifting dot gridRipplesDefault: None
Animation strengthNumberHow visible the background animation is. Lower is subtler.Default: 45
Number of bubblesNumberHow many bubbles float in this section. Phones show about half of them.Default: 6
Bubble arrangementNumber0: this section gets its own random arrangement. Pick any other number to shuffle the bubbles into a new one, for example if a bubble sits behind your text.Default: 0
Floating cardsGroup · 6 settings
BackgroundColorLeave empty to use the theme colors for the current light or dark mode.
TextColorText color used on top of colored backgrounds.
Corner radiusNumberRoundness of the corners. 0 is square.Default: 14
Card 1 icon colorColorIcon color for item 1.Default: #4F46E5
Card 2 icon colorColorIcon color for item 2.Default: #10B981
Card 3 icon colorColorIcon color for item 3.Default: #8B5CF6
ChecklistGroup · 2 settings
Check circle colorColorLeave empty to use the theme primary color.
Check mark colorColorLeave empty to use the theme colors for the current light or dark mode.
ButtonGroup · 4 settings
BackgroundColor
TextColorLeave empty to use the theme colors for the current light or dark mode.
Background on hoverColorLeave empty to use the theme button hover color.
Corner radiusNumberLeave empty to use the theme button radius.
Video imageGroup · 2 settings
Corner radiusNumberRoundness of the corners. 0 is square.Default: 16
Show shadowOn/offShadow under the image.Default: On
Play buttonGroup · 3 settings
BackgroundColorLeave empty to use the theme colors for the current light or dark mode.
IconColorLeave empty to use the theme colors for the current light or dark mode.
SizeNumberSize of the play button.Default: 88

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.