Overview
The Video element embeds video content from YouTube, Vimeo, or direct video file URLs. It renders as a <div> container with the aspect-video class for a 16:9 aspect ratio by default.
Default classes applied to the Video element:
aspect-video– Maintains 16:9 aspect ratiobg-gray-900– Dark background while video loadsrounded– Subtle border radiusoverflow-hidden– Clips content to rounded corners
The Video element supports autoplay, loop, and muted options, making it ideal for background video use cases where visual ambiance matters more than audio. The controls setting toggles the native video player UI for user interaction.
For background videos, enable autoplay, loop, and muted together. Most browsers require videos to be muted for autoplay to work without user interaction.
Settings
Configure the Video element using these Inspector options:
| Setting | Description | Default |
|---|---|---|
| Video URL | YouTube, Vimeo, or direct video file URL. Supports standard YouTube/Vimeo share links or direct .mp4/.webm file paths. |
(empty) |
| Autoplay | Start playing automatically when visible. Requires muted to be enabled on most browsers for compliance with autoplay policies. | false |
| Loop | Repeat video continuously when it reaches the end. Useful for background videos or looping animations. | false |
| Muted | Start with audio muted. Required for autoplay in most browsers due to browser autoplay policies. | false |
| Controls | Show native video player controls (play/pause, volume, progress bar, fullscreen). Disable for seamless background videos. | true |
| Start Time | Begin playback from a specific second. Enter the number of seconds to skip (e.g., 30 to start at 0:30). | 0 |
Examples
YouTube Embed
Embed a YouTube video with standard player controls. Simply paste the YouTube video URL in the Video URL field.
<div class="aspect-video bg-gray-900 rounded overflow-hidden">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
class="w-full h-full"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>Background Video with Autoplay
Create an ambient background video that plays silently on loop. Enable autoplay, loop, and muted, then disable controls for a seamless visual experience.
<div class="aspect-video bg-gray-900 rounded overflow-hidden">
<video
src="/videos/hero-background.mp4"
class="w-full h-full object-cover"
autoplay
loop
muted
playsinline
></video>
</div>Video with Custom Start Time
Start the video at a specific timestamp. Set the Start Time to the desired number of seconds (e.g., 90 for 1:30).
<div class="aspect-video bg-gray-900 rounded overflow-hidden">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ?start=90"
class="w-full h-full"
frameborder="0"
allowfullscreen
></iframe>
</div>