Video

Renders a src as either a native <video> or an <iframe> embed, auto-detected — no separate prop to pick one. A src ending in a recognized video file extension (.mp4, .webm, .ogg, .mov, …) gets a real <video controls>; anything else (a YouTube, Vimeo, or Loom embed URL) gets an <iframe>. Same card language as Image/Frame — same border-radius, and the same optional caption inside a bordered card:

A local/hosted video file renders as a real <video> element

An embed URL renders as an iframe instead

<Video src="media/paylink1.mp4" width="500px" />

<Video src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="500px" />

Video props

srcstringrequired

A video file path/URL, or an embed URL.

widthstringdefault: 100%

A CSS width ("500px", "80%", …) applied at full screen width.

captionstring

Omit it and the video renders with no card background, same as Image’s own caption.

controlsboolean

Only applies to the <video> case; ignored for an iframe embed, which controls its own playback through the embed URL itself.

autoplayboolean

Only applies to the <video> case. Forces muted on too, since browsers block unmuted autoplay outright.

loopboolean

Only applies to the <video> case.

mutedboolean

Only applies to the <video> case.

titlestring

The accessible name for the embed/video.