Video

Video embed component supporting multiple providers (YouTube, Vimeo, Dailymotion, Wistia, Facebook, Twitch, or direct URLs)

Required Props: id, videoId

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

Property	Type	Description	Examples
`provider`	string youtube \| vimeo \| dailymotion \| wistia \| facebook \| twitch \| url	Video provider platform Default: `"youtube"`	`youtube`
`videoId`*required	string	Video ID from the provider (or full URL for 'facebook' and 'url' providers)	`dQw4w9WgXcQ`
`title`	string	Video title for accessibility	-
`canDelete`	boolean	- Default: `true`	-
`canEditName`	boolean	- Default: `true`	-
`custom`	object	-	-
`className`	string	Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.	`flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold`
`url`	string	-	-
`urlTarget`	string	-	-
`role`	string	-	-
`aria-label`	string	-	-
`aria-hidden`	string	-	-
`aria-describedby`	string	-	-
`aria-live`	string polite \| assertive \| off	-	-
`root`	object	-	-

Examples

YouTube Video

{
  "provider": "youtube",
  "videoId": "dQw4w9WgXcQ",
  "title": "Demo YouTube video",
  "className": "aspect-video"
}

Vimeo Video

{
  "provider": "vimeo",
  "videoId": "123456789",
  "title": "Demo Vimeo video",
  "className": "aspect-video"
}