Video Player
A component to playback the video content. It lazy loads native video
or iframe
depending on video source, and shows image preview when it's not loaded.
![](https://i3.ytimg.com/vi/o9e12WbKrd8/hqdefault.jpg)
Props
Props | Type | Default | Description |
---|---|---|---|
poster | String | '' | Preview image, that showed instead of lazy loaded video or iframe |
src | String | '' | A source of the video |
sources | Array | [] | Multiple src used for video source tags |
autoplay | Boolean | false | WIP: Automatic playback for video. Adds attribute in case of video tag or query parameter into YouTube URL. |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
elements: {
videoPlayer: {
marginY: '{space.8}',
backgroundColor: '{color.gray.900}',
borderRadius: '{radii.sm}',
},
}
})