Videos

The <Video> component supports HTML5 video, YouTube embeds, Vimeo embeds, lightbox mode, background video, and captions.

Basic HTML5 video

usage
import { Video } from "swift-rust";

<Video
  src="/videos/promo.mp4"
  poster="/images/promo-poster.jpg"
  width={1280}
  height={720}
  controls
/>

Multiple sources

Pass an array of VideoSource objects to provide multiple formats. The browser will pick the first one it supports.

usage
<Video
  src={[
    { src: "/videos/promo.webm", type: "video/webm" },
    { src: "/videos/promo.mp4", type: "video/mp4" },
  ]}
  poster="/images/promo-poster.jpg"
  controls
/>

YouTube and Vimeo

Pass a YouTube or Vimeo URL as src, and the framework will detect the provider and embed it. You can also pass youtubeId or vimeoId directly.

usage
<Video
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="Demo"
  width={1280}
  height={720}
/>

Captions

Add captions in WebVTT format with the captions prop.

usage
<Video
  src="/videos/promo.mp4"
  captions={[
    { src: "/captions/en.vtt", lang: "en", label: "English", default: true },
    { src: "/captions/es.vtt", lang: "es", label: "Español" },
  ]}
  controls
/>

Add lightbox to open the video in a modal lightbox when the user clicks it.

usage
<Video
  src="/videos/promo.mp4"
  poster="/images/promo-poster.jpg"
  width={1280}
  height={720}
  lightbox
  lightboxTitle="Product demo"
/>

Background video

Use <BackgroundVideo> for full-bleed hero sections. It autoplays, loops, mutes, and renders an overlay so your content is always readable.

usage
import { BackgroundVideo } from "swift-rust";

<BackgroundVideo src="/videos/hero.mp4" overlay>
  <h1>Hello, world</h1>
</BackgroundVideo>

Next steps

Continue to PDFs.