Design System / Modules

Video

advancedMediafeatures

Native video player — poster, custom overlay controls (time + seek), and fullscreen.

Demo

Video
0:00
Paused

Source

The rendered structure, live from the demo above — hover a row to highlight the element in the demo.

Waiting for the demo to render…

Colour Mapping

Every colour token this module consumes, resolved under the active profile — neutral · light · brand default. Switch the profile above the demo to remap.

--gray-11
--module-surface-raised
--seed-a8
--seed-9
--module-surfacevia shared
--module-fg-mutedvia shared

Token contract

SEMANTIC SLOTS

--module-surface-raised--module-surface ·shared--module-fg-muted ·shared

SEED SCALE

--seed-a8--seed-9

RADIX COLOUR SCALES

--gray-11

LAYOUT & TYPE

--radius-4--space-3

Anatomy

LAYERS

Video ModuleModuleShell · borderless
Module HeaderRow
Module TitleRadix Text
Module CTAFullscreen Button
Module ContentBox (relative)
PlayerAspect Ratio (16:9)
VideoNative <video>
Controls OverlayRow (absolute)
ElapsedRadix Text
Seek BarBox (progress)

RADIX COMPONENTS

AspectRatioBoxFlexText

SHARED COMPOSITES

ModuleShell

Fields

The client-editable schema (builder-kit/lib/fields.ts) — what the Builder's fields rail and the Portal Builder expose. Defaults are the sample props the demo renders with.

KeyLabelTypeOptionsSample default
titleModule titletext—Video
aspectRatioAspect ratioaspect-ratio——
headerShow headertoggle——

Registry

Filemodules/features/VideoModule/VideoModule.tsx
ComponentVideoModule
Tier / groupadvanced · features
Statusbuilt
Client referencescnx, genesys, hlls