Adding Video and Audio Elements in Lovable Projects

Why video and audio elements may not work correctly in Lovable

Adding media to a Lovable project is straightforward, but several browser behaviors can make videos and audio appear broken even when the code is correct. The most common issue is autoplay policy enforcement. Modern browsers (Chrome, Safari, Firefox) block autoplaying media that has sound. If you add autoplay to a video tag without also adding the muted attribute, the browser silently refuses to play it — no error appears, the video just sits frozen. For self-hosted video and audio files, the file must be in the /public folder with the correct path. Lovable's Vite build serves static files from /public at the root URL, so a file at /public/videos/intro.mp4 is accessed as /videos/intro.mp4 in your code. Getting this path wrong results in a broken media player with no content. Embedding YouTube or Vimeo videos requires an iframe rather than a video tag. The main issue with iframes is responsive sizing — without proper CSS, the embedded video either has a fixed pixel size that breaks on mobile or collapses to zero height. Tailwind's aspect-video class combined with a width-full container solves this reliably.

• Autoplay blocked by browser: video has autoplay but is missing the muted attribute
• Wrong file path: media file is not in /public or the src path does not match the actual file location
• Missing controls attribute: video/audio element renders but has no play button visible to the user
• Non-responsive iframe: YouTube/Vimeo embed has fixed dimensions that break on mobile screens
• CORS restrictions: media hosted on a different domain blocks loading due to cross-origin policy

Error messages you might see

Before you start

• A Lovable project open in the editor
• Your video or audio file (for self-hosted) or the YouTube/Vimeo video URL (for embeds)
• For self-hosted files: access to the /public folder via GitHub or Dev Mode to upload media files

How to fix it

<!-- Broken: autoplay without muted, missing controls -->
<video autoplay src="videos/intro.mp4">
  Your browser does not support the video tag.
</video>
{/* Video won't autoplay and user can't manually play either */}

<!-- Working: muted autoplay with controls and responsive sizing -->
<video
  autoPlay
  muted
  controls
  loop
  playsInline
  className="w-full max-w-2xl rounded-lg"
  src="/videos/intro.mp4"
>
  Your browser does not support the video tag.
</video>
{/* Note: autoPlay is camelCase in JSX, playsInline prevents fullscreen on iOS */}

<!-- Broken: using watch URL and fixed pixel dimensions -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
></iframe>
{/* X-Frame-Options error and non-responsive on mobile */}

<!-- Working: embed URL with responsive container -->
<div className="w-full max-w-3xl aspect-video">
  <iframe
    className="w-full h-full rounded-lg"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
</div>
{/* Responsive 16:9 container that works on all screen sizes */}

<!-- Broken: audio file not in /public, no controls -->
<audio src="podcast.mp3" autoplay />
{/* No visible player, autoplay blocked, file 404 */}

<!-- Working: file in /public, controls visible, fallback formats -->
<audio controls className="w-full max-w-md">
  <source src="/audio/podcast.mp3" type="audio/mpeg" />
  <source src="/audio/podcast.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>
{/* Native player UI with play/pause, seek, and volume */}

// Repeating iframe code on every page
<iframe src="https://www.youtube.com/embed/abc" width="560" height="315" />
<iframe src="https://www.youtube.com/embed/def" width="560" height="315" />
{/* Inconsistent sizing, no responsive behavior */}

// Using the reusable VideoEmbed component
import VideoEmbed from "@/components/VideoEmbed";
<VideoEmbed url="https://www.youtube.com/embed/abc" title="Tutorial 1" />
<VideoEmbed url="https://www.youtube.com/embed/def" title="Tutorial 2" />
{/* Consistent responsive behavior across all embeds */}

Complete code example

1import { cn } from "@/lib/utils";
2
3interface VideoEmbedProps {
4  url: string;
5  title: string;
6  className?: string;
7  autoplay?: boolean;
8}
9
10// Reusable responsive video embed component
11// Works with YouTube, Vimeo, and any iframe-compatible video URL
12const VideoEmbed = ({ url, title, className, autoplay = false }: VideoEmbedProps) => {
13  // Append autoplay parameter if requested
14  const embedUrl = autoplay && !url.includes("autoplay")
15    ? `${url}${url.includes("?") ? "&" : "?"}autoplay=1&mute=1`
16    : url;
17
18  return (
19    <div className={cn("w-full aspect-video", className)}>
20      <iframe
21        className="w-full h-full rounded-lg"
22        src={embedUrl}
23        title={title}
24        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
25        allowFullScreen
26      />
27    </div>
28  );
29};
30
31// Example page using the component
32const VideoPage = () => {
33  return (
34    <div className="container mx-auto py-8 space-y-8">
35      <h1 className="text-3xl font-bold">Video Gallery</h1>
36
37      {/* YouTube embed */}
38      <VideoEmbed
39        url="https://www.youtube.com/embed/dQw4w9WgXcQ"
40        title="Product demo"
41        className="max-w-3xl"
42      />
43
44      {/* Self-hosted video with native player */}
45      <video
46        controls
47        playsInline
48        className="w-full max-w-3xl rounded-lg"
49        src="/videos/tutorial.mp4"
50      >
51        Your browser does not support the video tag.
52      </video>
53    </div>
54  );
55};
56
57export default VideoEmbed;

Best practices to prevent this

• Always add muted alongside autoplay — browsers block autoplay with sound, but muted autoplay is allowed on all platforms
• Use the aspect-video Tailwind class on the iframe container to maintain 16:9 ratio responsively
• Add playsInline to video tags so mobile Safari does not force fullscreen playback
• Use YouTube/Vimeo embed URLs (youtube.com/embed/ID, player.vimeo.com/video/ID) not regular watch URLs in iframes
• Place self-hosted media files in /public/videos/ or /public/audio/ and reference with root-relative paths starting with /
• Always include the controls attribute on video and audio elements so users can play, pause, and seek
• Add a title attribute to iframes for accessibility — screen readers use it to describe the embedded content
• Compress video files before uploading — large files slow page load; consider using a video hosting service for files over 10MB

Still stuck?

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

Related error patterns