Adding video and audio elements to v0 projects

Why video and audio elements break in V0 apps

V0 generates server-rendered Next.js components by default. HTML5 video and audio elements with interactive controls (play, pause, volume) require browser APIs that only work in client components. When V0 places media elements in a Server Component without the 'use client' directive, the controls render but do not respond to user interaction. Additionally, media files referenced with relative paths or incorrect public/ directory structure return 404 errors after deployment.

• Missing 'use client' directive on components with interactive media controls
• Media files not placed in the public/ directory or referenced with relative paths
• YouTube/Vimeo embeds blocked by Content Security Policy headers on Vercel
• Autoplay blocked by browser policies — requires muted attribute for autoplay to work
• Large video files causing slow page loads without lazy loading or streaming

Error messages you might see

Before you start

• A V0 project where you need video or audio elements
• Media files ready (local MP4/MP3 or external URLs like YouTube)
• Basic understanding of HTML5 media elements

How to fix it

// app/components/VideoPlayer.tsx
// Missing 'use client' — controls won't work
import { useRef } from 'react';
export function VideoPlayer() {
  const videoRef = useRef<HTMLVideoElement>(null);
  return <video ref={videoRef} controls src="/videos/intro.mp4" />;
}

// app/components/VideoPlayer.tsx
'use client';
import { useRef } from 'react';
export function VideoPlayer() {
  const videoRef = useRef<HTMLVideoElement>(null);
  return (
    <video
      ref={videoRef}
      controls
      src="/videos/intro.mp4"
      className="w-full rounded-lg"
    />
  );
}

// WRONG — relative path or import
import introVideo from './assets/intro.mp4';
<video src={introVideo} />

// CORRECT — absolute path from public/
<video src="/videos/intro.mp4" controls className="w-full" />

// Non-responsive, fixed-size embed
<iframe
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  width="560"
  height="315"
/>

<div className="aspect-video w-full">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Video title"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
    className="w-full h-full rounded-lg"
  />
</div>

// Autoplay will be blocked by the browser
<video autoPlay loop src="/videos/hero-bg.mp4" />

<video
  autoPlay
  muted
  loop
  playsInline
  poster="/images/hero-poster.jpg"
  className="absolute inset-0 w-full h-full object-cover -z-10"
>
  <source src="/videos/hero-bg.mp4" type="video/mp4" />
  <source src="/videos/hero-bg.webm" type="video/webm" />
</video>

Complete code example

1'use client';
2
3import { useState, useRef } from 'react';
4import { Button } from '@/components/ui/button';
5import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
6import { Play, Pause, Volume2, VolumeX } from 'lucide-react';
7
8export function MediaSection() {
9  const videoRef = useRef<HTMLVideoElement>(null);
10  const [isPlaying, setIsPlaying] = useState(false);
11  const [isMuted, setIsMuted] = useState(false);
12
13  const togglePlay = () => {
14    if (!videoRef.current) return;
15    if (isPlaying) {
16      videoRef.current.pause();
17    } else {
18      videoRef.current.play();
19    }
20    setIsPlaying(!isPlaying);
21  };
22
23  return (
24    <Card className="max-w-2xl mx-auto">
25      <CardHeader>
26        <CardTitle>Product Demo</CardTitle>
27      </CardHeader>
28      <CardContent className="space-y-4">
29        <div className="relative rounded-lg overflow-hidden">
30          <video
31            ref={videoRef}
32            src="/videos/demo.mp4"
33            poster="/images/demo-poster.jpg"
34            muted={isMuted}
35            className="w-full"
36            onEnded={() => setIsPlaying(false)}
37          />
38        </div>
39        <div className="flex gap-2">
40          <Button variant="outline" size="sm" onClick={togglePlay}>
41            {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
42          </Button>
43          <Button variant="outline" size="sm" onClick={() => setIsMuted(!isMuted)}>
44            {isMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
45          </Button>
46        </div>
47      </CardContent>
48    </Card>
49  );
50}

Best practices to prevent this

• Always add 'use client' to components that use video/audio controls or event handlers
• Store local media files in public/videos/ or public/audio/ and reference with absolute paths
• Use the muted attribute for autoplay — browsers block unmuted autoplay universally
• Provide multiple source formats (MP4 and WebM) for cross-browser compatibility
• Add a poster attribute to video elements to show a preview image while the video loads
• Use Tailwind's aspect-video class for responsive 16:9 video containers
• For large videos, consider external hosting (YouTube, Vimeo, Cloudflare Stream) instead of public/ directory
• Add loading='lazy' or use dynamic imports for below-the-fold media to improve page load speed

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue