Video Embed¶
A single video block with a styled play button - it opens in a lightbox popup or plays inline in place, from HubSpot, YouTube, Vimeo, or a direct link. Best for: hero video features, product demos, testimonial videos, and "watch the story" sections.
📷 Hero image
Target file: assets/img/video-embed/hero.webp
A single video block centered in the section, showing a 16:9 poster image with softly rounded corners and a circular play button sitting dead-center over it. The play button uses a Light background with a Primary-colored play triangle icon. Keep the frame clean with generous space around it so the poster-plus-play-button treatment reads as the focus. Captured at desktop width.
At a glance¶
Video Media Lightbox
- What it does: renders one video with a styled play button on a poster frame. In modal mode it opens in a GLightbox popup; in play-in-place mode it plays inline as a YouTube/Vimeo iframe or an HTML5 video (with optional autoplay, mute, loop, and controls).
- Best used for: a standalone video block - a product demo, a testimonial clip, or a "watch the story" feature.
- Not the right fit if: you want a full hero with headline and buttons over a background video (use Single Column Banner - Simple), or a grid of many videos (use Portfolio).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Video Embed.
- Drag it into your page where the video should sit.
- Open Click to update content and pick a Choose video style (modal popup or play in place).
- Set Choose video source and paste the matching value (HubSpot video, YouTube ID, Vimeo ID, or a direct link).
- Add a Video poster image so there is a thumbnail before play.
- Style the frame and play button under the Style tab, and add a caption if you want one.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
A poster with a play button that opens the video in a popup.
📷 Result
Target file: recipe-modal-lightbox-default.webp
A 16:9 poster with a circular play button centered over it, where the button uses a Light background and a Primary play icon. Show the resting state before click, since this opens the video in a lightbox popup.
| Field | Set to |
|---|---|
| Content › Choose video style | video_play_in_modal |
| Content › Video poster | your thumbnail image |
| Video and Poster image › Ratio for image | aspect-16by9 |
| Video button › Background | bg-light |
An MP4 that plays inline where it sits, on click.
📷 Result
Target file: recipe-play-in-place-html5.webp
The video block showing its poster with the play button, where a click plays the MP4 inline in the same frame rather than in a popup. Capture the poster state so the in-place frame is clear.
| Field | Set to |
|---|---|
| Content › Choose video style | video_play_on_place |
| Content › Choose video source | link (paste the MP4 URL) |
| Content › Video poster | your thumbnail image |
A muted, looping clip that plays automatically inline.
📷 Result
Target file: recipe-autoplay-background-style.webp
The video frame showing a mid-playback frame of the muted looping clip playing inline with no play button overlay, giving a background-video feel. Capture at desktop width so the full frame is visible.
| Field | Set to |
|---|---|
| Content › Choose video style | video_play_on_place |
| Content › Autoplay | on |
| Content › Mute | on |
| Content › Loop | on |
A dimmed poster that drifts on scroll, then opens in a popup.
📷 Result
Target file: recipe-poster-with-overlay-parallax.webp
A poster darkened by a dark overlay, with strongly rounded corners and the centered play button still clearly visible on top. Capture the resting frame, since the parallax drift and popup only show in motion.
| Field | Set to |
|---|---|
| Content › Choose video style | video_play_in_modal |
| Video and Poster image › Poster overlay | bg-overlay-1 |
| Video and Poster image › Add parallax | on |
| Video and Poster image › Round corner | round-xxl |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Open the video in a popup | Content › Choose video style = video_play_in_modal |
| Play the video inline | Content › Choose video style = video_play_on_place |
| Use a YouTube video | Choose video source = youtube + paste the YouTube ID |
| Use a direct MP4 | Choose video source = link + paste the file URL |
| Autoplay muted loop | Content › Autoplay + Mute + Loop |
| Show a thumbnail before play | Content › Video poster |
| Dim the poster | Video and Poster image › Poster overlay (modal mode) |
| Make the poster drift on scroll | Video and Poster image › Add parallax (modal mode) |
| Bigger play button | Video button › Width & height button (desktop/tablet/mobile) |
| Grow the play button on hover | Video button › Scaling on hover |
| 16:9 / 1:1 / custom height frame | Video and Poster image › Ratio for image |
| Add a label under the video | Content › Add video caption + Video caption |
| Name the play button for screen readers | Content › Play button screen-reader label |
Field reference¶
The editor is organized into a Content tab and a Style tab. Full field lists are grouped exactly as they appear in HubSpot. (149 fields total - expand each group as needed.)
Content tab¶
Click to update content
| Field | Type | Options | Default |
|---|---|---|---|
| Choose video style | choice | video_play_in_modal / video_play_on_place | video_play_in_modal |
| Choose video source | choice | hubspot / vimeo / youtube / link | hubspot |
| HubSpot video | file | - | - |
| Youtube id / Vimeo id | text | paste ID only, not the URL | - |
| Link | text | direct file URL (MP4) | - |
| Video poster | image | thumbnail before play | - |
| Autoplay / Mute / Loop | boolean | - | off |
| Add video caption / Video caption | boolean / text | - | off |
| Play button screen-reader label | text | announced by screen readers | Play video |
Section background settings (Content)
- Type:
none/ color / gradient / image / video. - Upload background image and Video feed the image/video background types.
Drag to section name
Section name: sets this section's ID so scroll-to-section buttons elsewhere can link to it. Use lowercase letters and underscores only.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Video and Poster image
| Field | Type | Default |
|---|---|---|
| Ratio for image | choice (9 ratios / custom_height) | aspect-16by9 |
| Custom height [desktop / tablet / mobile] | number | 500 / 400 / 400 |
| Poster position | choice (center / top / bottom / left / right) | object-center |
| Poster overlay | choice (none / bg-overlay-1 to 6) | none |
| Round corner | choice (round-0 to round-xxl / custom) | round-xxl |
| Shadow | choice (none / light / dark / regular) | none |
| Add parallax (+ scale / speed) | boolean | off |
Poster overlay and parallax apply in modal mode.
Video button
| Field | Type | Default |
|---|---|---|
| Background | choice (bg tokens / bg-gradient-1 to 3 / custom) | bg-light |
| Width & height button [desktop / tablet / mobile] | number | 100 / 80 / 60 |
| Shadow | choice (none / light / dark / regular) | none |
| Show border (+ width / color) | boolean | off |
| Round corner | choice (round-0 to round-xxl / custom) | custom |
| Scaling on hover | number | 1.05 |
Video button icon
| Field | Type | Default |
|---|---|---|
| Icon | icon | Play |
| Video icon size [desktop / tablet / mobile] | number | 32 / 26 / 20 |
| Icon color | choice (tokens / custom) | Primary |
Video caption
| Field | Type | Default |
|---|---|---|
| Show video caption as | choice (h1-h6 / typo-1 / typo-2 / custom / p) | p |
| Custom font size [desktop / tablet / mobile] | number | 16 / 15 / 14 |
| Make font bold | boolean | off |
| Color | choice (default / text tokens) | default |
| Spacing below element | choice (default / 0 / s to 4xl) | default |
Section background settings (Style)
- Color / Gradient / overlay style for the section background, plus image/video position.
- Blur effect (+ amount) and Parallax effect (+ scale / speed).
- Radial glow (×2): each glow has color (token/custom), position (9 spots), size, and opacity. Defaults are Secondary and Tertiary.
Section divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top/bottom/both, width, color (default Tertiary).
- Shadow divider: regular/light/dark/custom shadow with x/y/blur/spread/color.
- Shape divider: 25 shapes, top/bottom/both, flip/invert, color or gradient, responsive heights.
Section spacing settings
| Field | Options | Default |
|---|---|---|
| Top | top-y-0 to top-4xl | top-l |
| Bottom | bottom-y-0 to bottom-4xl | bottom-l |
| Left | left-x-0 / left-m / left-l / left-xl | left-m |
| Right | right-x-0 / right-m / right-l / right-xl | right-m |
Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
- Section wrapper container: default / full-width / custom (per breakpoint) + block alignment.
- Inner content container: independent inner width + alignment.
- Alignment: left / center / right for the video caption.
Developer use only
Add custom CSS here: per-module CSS injection field.
Tips & gotchas¶
Autoplay needs mute
Most browsers only allow Autoplay when Mute is also on. Turn both on together for a background-style clip.
Paste the ID, not the URL
For YouTube and Vimeo, paste only the video ID into the Youtube id / Vimeo id field, not the full share URL.
Poster overlay and parallax are modal-only
Poster overlay and Add parallax apply in modal mode with a poster image. They do nothing in play-in-place mode.
Related modules¶
- Single Column Banner - Simple: a full hero with headline and buttons over a background image or video.
- Portfolio: a grid or gallery when you have many media items to show.
- Content and Media: a text-and-media split when the video sits beside copy.