Video. A responsive HTML video player with caption support.
- Media
- Interactive
- Stability · Initial
- ::postkit-video
Usage.
<Video
src="data:video/mp4;base64,"
poster="/component-preview.svg"
title="Postkit in two minutes"
caption="A quick tour of the portable publishing contract."
duration="2:00"
decorative
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| srcRequired | string | None | The video file URL. |
| titleRequired | string | None | An accessible title for the video. |
| poster | string | None | The preview image URL. |
| caption | string | None | Visible supporting text below the player. |
| aspectRatio | string | "16 / 9" | A CSS aspect ratio such as 16 / 9. |
| preload | "none" | "metadata" | "auto" | "metadata" | Browser preload behavior. |
| captions | string | None | The captions track (a WebVTT file URL). |
| captionsLang | string | None | The language of the captions track, such as en. |
| duration | string | None | The running time, such as 0:24 or 1:02:03, shown with the caption. |
| decorative | boolean | None | Marks a video without speech or meaningful sound, such as a silent loop, so it needs no captions track. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- frame
- player
- caption
- fallback
- duration
- number
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned