Shadcn Video

export function VideoDemo() {
  return (
    <div className="w-full">
      <video className="h-full w-full rounded-lg" controls>
        <source
          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
    </div>
  )
}

Installation

pnpmnpmyarnbun
pnpm dlx @creative-tim/ui@latest add video
Copy

Usage

Copyimport VideoDemo from "@/components/video-demo"

Copy<VideoDemo />

Examples

Video Autoplay

A video player configured to automatically start playing when loaded, with looping enabled for continuous playback, ideal for background videos or hero sections.

export function VideoAutoplay() {
  return (
    <div className="w-full">
      <video className="h-full w-full rounded-lg" controls autoPlay loop>
        <source
          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
    </div>
  )
}

Video Muted

A video player with muted audio by default, allowing users to control playback without sound, perfect for scenarios where audio might be disruptive or when users prefer to watch without sound.

export function VideoMuted() {
  return (
    <div className="w-full">
      <video className="h-full w-full rounded-lg" controls muted>
        <source
          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
    </div>
  )
}

Best Practices

• Use appropriate video formats (MP4, WebM) for maximum browser compatibility
• Optimize video file sizes for web delivery to ensure fast loading times
• Provide fallback content for browsers that don't support the video tag
• Consider using poster images to show a preview before video playback
• Implement responsive sizing to ensure videos display correctly on all devices
• Use autoplay sparingly and always with muted audio to respect user preferences
• Consider accessibility by providing captions or transcripts for video content
• Test video playback across different browsers and devices

Video components provide a straightforward way to embed and display video content in your application. They're ideal for product demonstrations, tutorials, background videos, testimonials, and any interface where video content enhances the user experience.