Components
Video
A native video element with forwarded playback and media attributes.
Props
Native attributes and event handlers are forwarded to the underlying video element
unless handled by the component.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLVideoElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Video from sveltewind/components. This example shows its default styling in a usable context.
Loading...This poster-only preview shows the native controls. Supply src or Source children to play your own video.
Examples
Theme variants
Every variant available for Video in the built-in themes is shown below.
rounded — Apply the rounded variant.
Loading...bordered — Apply the bordered variant.
Loading...full — Apply the full variant.
Loading...Class overrides
Apply rounded-xl border-2 border-primary-500/50 shadow-md locally.
Loading...Props and behavior
Change controls, muted, loop while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Provide media sources
Place Source children inside Video. Replace the sample URL with your video file; this preview displays the player without downloading media.
Loading...