Video(props: VideoProps): Component;
VideoProps type requires either a url or video source, plus optional playback settings:
type VideoProps = { autoplay?: boolean; muted?: boolean; controls?: boolean; loop?: boolean; contentMode?: "fit" | "fill" } &
({ url: string } | { video: string });
URL of a remote video to load.
Whether the video starts playing automatically. Defaults to false.
Whether the video is muted. Defaults to false.
Whether playback controls are shown. Defaults to true.
Whether the video loops continuously. Defaults to false.
How the video is scaled within its frame. Defaults to "fit".
Support
Usage
Basic video
Video({ url: "https://example.com/video.mp4" })
Autoplay background video
Video({
url: "https://example.com/hero.mp4",
autoplay: true,
muted: true,
loop: true,
controls: false,
contentMode: "fill"
})
.frame({ height: 300 })
.cornerRadius(12)
Local video asset
Video({ video: "intro.mp4" })
Fit vs fill
Video({ url: "https://example.com/video.mp4", contentMode: "fit" })
.frame({ width: 400, height: 300 })
Video({ url: "https://example.com/video.mp4", contentMode: "fill" })
.frame({ width: 400, height: 300 })
.clipped()
See Also
