Default video module
Meant to be an eventual replacement for the default @hubspot/video module, which renders an iframe of the video-player-ui static app.
Supported Features:
- ✅ Advanced playback options (autoplay, loop etc)
- ✅ Customize play button color
- ✅ HLS streaming
- ✅ Subtitles
- [WIP] Play tracking & attribution
- [ ] Form & CTA overlays
- [ ] Rich text support (depends on JSR platform support)
{
"embed_field": {
"source_type": "oembed",
"supported_oembed_types": [
"video"
]
},
"hubspot_video": {
"height": 1080,
"loop_video": true,
"mute_by_default": true,
"player_id": 53322141446,
"player_type": "hsvideo2",
"width": 1920
},
"style_options": {
"play_button_color": {
"color": "#B45F06",
"css": "#B45F06",
"hex": "#B45F06",
"opacity": 100,
"rgb": "rgb(180, 95, 6)",
"rgba": "rgba(180, 95, 6, 1)"
}
},
"video_type": "hubspot_video",
"dataQueryResult": {},
"fieldValues": {
"embed_field": {
"source_type": "oembed",
"supported_oembed_types": [
"video"
]
},
"hubspot_video": {
"height": 1080,
"loop_video": true,
"mute_by_default": true,
"player_id": 53322141446,
"player_type": "hsvideo2",
"width": 1920
},
"style_options": {
"play_button_color": {
"color": "#B45F06",
"css": "#B45F06",
"hex": "#B45F06",
"opacity": 100,
"rgb": "rgb(180, 95, 6)",
"rgba": "rgba(180, 95, 6, 1)"
}
},
"video_type": "hubspot_video"
},
"hublParameters": {
"field_types": {
"embed_field": "embed",
"hubspot_video": "videoplayer",
"style_options": "group",
"video_type": "choice"
},
"isJsModule": true,
"is_widget_block": true,
"label": "[Video Prototype] Default Module",
"module_id": 55504482841,
"org_tag": "module_block",
"parent_widget_container": "dnd_area",
"path": "@hubspot/video_prototype",
"smart_objects": [],
"smart_type": "NOT_SMART",
"widget_type": "module",
"wrap_field_tag": "div"
},
"hublData": null,
"experimentalHublData": null,
"moduleName": "widget_1727371465637",
"supplementalFieldValues": {
"embed_field": {},
"hubspot_video": {},
"style_options": {
"play_button_color": {}
},
"video_type": {}
}
}External embed
The default video module supports external embeds via an oEmbed URL or arbitrary HTML
Supported Features: Depends on the provider, but none are customizable within the editor.
{
"embed_field": {
"embed_html": "https://www.youtube.com/watch?v=Mu2j7ib9_yA",
"height": 226,
"max_height": 113,
"max_width": 200,
"oembed_response": {
"author_name": "Ethan Chlebowski",
"author_url": "https://www.youtube.com/@EthanChlebowski",
"height": "113",
"html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/Mu2j7ib9_yA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen title=\"Can you actually taste a difference between Tomatoes?\"></iframe>",
"provider_name": "YouTube",
"provider_url": "https://www.youtube.com/",
"thumbnail_height": "360",
"thumbnail_url": "https://i.ytimg.com/vi/Mu2j7ib9_yA/hqdefault.jpg",
"thumbnail_width": "480",
"title": "Can you actually taste a difference between Tomatoes?",
"type": "video",
"version": "1.0",
"width": "200"
},
"oembed_url": "https://www.youtube.com/watch?v=Mu2j7ib9_yA",
"size_type": "auto_full_width",
"source_type": "oembed",
"supported_oembed_types": [
"video"
],
"width": 400
},
"hubspot_video": {
"player_id": null
},
"style_options": {
"play_button_color": {
"color": "#F7761F",
"css": "#F7761F",
"hex": "#F7761F",
"opacity": null,
"rgb": "rgb(247, 118, 31)",
"rgba": "rgba(247, 118, 31, 1)"
}
},
"video_type": "embed",
"dataQueryResult": {},
"fieldValues": {
"embed_field": {
"embed_html": "https://www.youtube.com/watch?v=Mu2j7ib9_yA",
"height": 226,
"max_height": 113,
"max_width": 200,
"oembed_response": {
"author_name": "Ethan Chlebowski",
"author_url": "https://www.youtube.com/@EthanChlebowski",
"height": "113",
"html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/Mu2j7ib9_yA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen title=\"Can you actually taste a difference between Tomatoes?\"></iframe>",
"provider_name": "YouTube",
"provider_url": "https://www.youtube.com/",
"thumbnail_height": "360",
"thumbnail_url": "https://i.ytimg.com/vi/Mu2j7ib9_yA/hqdefault.jpg",
"thumbnail_width": "480",
"title": "Can you actually taste a difference between Tomatoes?",
"type": "video",
"version": "1.0",
"width": "200"
},
"oembed_url": "https://www.youtube.com/watch?v=Mu2j7ib9_yA",
"size_type": "auto_full_width",
"source_type": "oembed",
"supported_oembed_types": [
"video"
],
"width": 400
},
"hubspot_video": {
"player_id": null
},
"style_options": {
"play_button_color": {
"color": "#F7761F",
"css": "#F7761F",
"hex": "#F7761F",
"opacity": null,
"rgb": "rgb(247, 118, 31)",
"rgba": "rgba(247, 118, 31, 1)"
}
},
"video_type": "embed"
},
"hublParameters": {
"field_types": {
"embed_field": "embed",
"hubspot_video": "videoplayer",
"style_options": "group",
"video_type": "choice"
},
"isJsModule": true,
"is_widget_block": true,
"label": "[Video Prototype] Default Module",
"module_id": 55504482841,
"org_tag": "module_block",
"parent_widget_container": "dnd_area",
"path": "@hubspot/video_prototype",
"smart_objects": [],
"smart_type": "NOT_SMART",
"widget_type": "module",
"wrap_field_tag": "div"
},
"hublData": null,
"experimentalHublData": null,
"moduleName": "widget_1727371530990",
"supplementalFieldValues": {
"embed_field": {},
"hubspot_video": {},
"style_options": {
"play_button_color": {}
},
"video_type": {}
}
}Simple HTML5 player
This module renders a simple <video> tag without iframes or external scripts involved. This might make sense to introduce as a net-new module for short videos, video backgrounds, or other cases where the iframe player is overkill.
Supported Features:
- ✅ Advanced playback options (autoplay, loop etc)
- ✅ Customize play button color
- ❌ HLS streaming (requires hls.js, out of scope)
- [ ] Subtitles
- [ ] Play tracking & attribution
- [ ] Form & CTA overlays
- [ ] Rich text support (depends on JSR platform support)