Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/video-embed.tsx@viliha/vui-react/video-embedThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { VideoEmbed } from "@viliha/vui-react/video-embed";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| VideoEmbed | component | — |
VideoEmbed props
| Prop | Type | Default | What it does |
|---|---|---|---|
| videoId | string | — | The provider's id, not a full URL: the URL is the provider's shape and belongs in here. |
| title | string | — | What the video is. Required, because a frame with no name is unusable without sight. |
| ratio? | VideoRatio | "16:9" | |
| provider? | "youtube" | "vimeo" | "youtube" | |
| eager? | boolean | — | Load the player on mount instead of on click. Off by default, and that default is the point of this component. Reach for `eager` only when the video **is** the page and the visitor came for it. |
| poster? | string | — | A still shown before the player loads. Optional, because click-to-load works without one: the frame is the component's own surface and the button names the video. |
| className? | string | — |
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.