ComponentsLumos 0.0.1Open component
Video
A video with a fixed aspect ratio, so the page does not jump when it loads.
Video renders a <video> with an aspect ratio applied up front. That is the important part: a video whose height is unknown until its metadata arrives shifts everything below it when it loads.
<Video src="/showreel.mp4" poster="/showreel-still.jpg" variant="16-9" />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
src | string | None | The video file's URL. Nothing renders without one. |
poster | string | None | A still shown before playback starts. |
variant | "2-1" | "16-9" | "3-2" | "5-4" | "1-1" | "4-5" | "2-3" | "custom" | "auto" | "16-9" | The aspect ratio, applied with the matching ratio-* utility. Presets run widest to tallest. |
ratio | string | None | Any CSS aspect-ratio value, such as 21 / 9. Only with variant="custom". |
loop | boolean | true | Restarts on reaching the end. |
autoplay | boolean | true | Begins playing without interaction. Browsers only allow this while muted. |
muted | boolean | true | Plays without sound. Required for autoplay to be permitted. |
transparent | boolean | false | For cut-outs: fits the whole frame in rather than cropping, and drops the loading tint. |
auto, and why to avoid it
variant="auto" matches the file's own dimensions, but those are unknown until the metadata downloads, so the page reflows when it arrives. Use a preset wherever you can, especially above the fold.
Background video
In a section's background slot, the video fills the band and ignores the mouse. Pair it with an Overlay so text over it stays readable.
<Section theme="dark">
<Video slot="background" src="/loop.mp4" class="cover" />
<Overlay slot="background" strength={60} />
<Heading tag="h1" variant="display">Over the video</Heading>
</Section>