Video Text

A text component with a video background.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/video-text.json"

Copy and paste the following code

VideoText.vue

Prop Name	Type	Default	Description
`src`	`string`	`Required`	The video source URL.
`class`	`string`	`""`	Additional classes for the container.
`autoPlay`	`boolean`	`true`	Whether to autoplay the video.
`muted`	`boolean`	`true`	Whether to mute the video.
`loop`	`boolean`	`true`	Whether to loop the video.
`preload`	`"auto" \| "metadata" \| "none"`	`"auto"`	Whether to preload the video.
`fontSize`	`string \| number`	`"120"`	Font size for the text mask.
`fontWeight`	`string \| number`	`"bold"`	Font weight for the text mask.
`textAnchor`	`string`	`"middle"`	Text anchor for the text mask.
`dominantBaseline`	`string`	`"middle"`	Dominant baseline for the text mask.
`fontFamily`	`string`	`"sans-serif"`	Font family for the text mask.

On This Page