Skip to main content
Video renders an HTML5 <video> element with playback controls. Supports dynamic URLs via {{ field }} interpolation.

​
Basic Usage

Controls are shown by default. The first positional argument is src.

​
Playback Options

Control autoplay, looping, and muting. Browsers require muted=True for autoplay to work without user interaction:
Autoplay with loop
from prefab_ui.components import Video

Video(
    src="https://example.com/background.mp4",
    autoplay=True,
    muted=True,
    loop=True,
    controls=False,
)

​
Poster Image

Show a thumbnail before the video plays:
Poster thumbnail
from prefab_ui.components import Video

Video(
    src="https://example.com/presentation.mp4",
    poster="https://example.com/thumbnail.jpg",
    width="640px",
)

​
API Reference

Video Parameters

​
src
str
required
Video URL.
​
poster
str | None
default:"None"
Poster image URL shown before playback.
​
controls
bool
default:"True"
Show playback controls.
​
autoplay
bool
default:"False"
Auto-start playback. Requires muted=True in most browsers.
​
loop
bool
default:"False"
Loop playback.
​
muted
bool
default:"False"
Mute audio.
​
width
str | None
default:"None"
CSS width value with units.
​
height
str | None
default:"None"
CSS height value with units.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Video
{
  "type": "Video",
  "src": "string (required)",
  "poster?": "string",
  "controls?": true,
  "autoplay?": false,
  "loop?": false,
  "muted?": false,
  "width?": "string",
  "height?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Video.