- Where to find it
- On the composer’s palette, labelled Video. Drag it onto the canvas to add one.
- Its settings
- 11 of them, in the “Selected Component” section of the Modify drawer.
- Provided by
- RuleCMS, in
@rulecms/source-components-react. Available to every team.
In plain English
The Video component plays a video you have uploaded to your team's Videos library. Rather than serving the exact file you gave it, RuleCMS converts it on its way to each visitor into a format their browser can play, capped at a size sensible for a web page. An MP4, a WebM, and a MOV all end up working everywhere, and you do not have to think about which is which.
Upload first under Videos on the team dashboard — that is a separate library from Images. Formats are MP4, WebM, and MOV, up to about 100 MB. On the video's detail page you can also save default playback settings; picking that video later in the composer can fill empty fields from those defaults. The full library walkthrough is under Media Assets in the docs.
In everyday use on the canvas you touch one setting: Video Selector, which is where you pick the video. Everything else has a working default — controls are shown, playback waits for the visitor, and the video's own first frame stands in as the still image beforehand.
The remaining settings exist for two situations. The playback group — Controls, Autoplay, Loop, Muted, Plays Inline — is really one decision expressed five ways: is this a video someone watches, or is it moving decoration? A video someone watches needs nothing changed. Moving decoration means autoplay on, muted on, looping on, controls off, and those four go together as a set.
The other group is about weight and stability: Preload decides how much a visitor downloads before pressing play, and the two Intrinsic settings stop the page jumping about while the video loads. Video Transformations is the escape hatch for reshaping the delivered video yourself.
When you would use it
- A product demo, a testimonial, a walkthrough, or a recorded talk.
- A short, silent, looping clip as a background behind a headline.
- Any clip you have already uploaded under Videos and want on a published page.
Its settings
These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Video Selector | Video Selector | Pick the video a video component plays from your team's uploaded videos. |
| Poster Image | Poster Image | The still picture shown in place of the video until someone presses play. |
| Video Controls | Video Controls | Whether the browser's play, pause, volume, and timeline bar are shown. |
| Video Autoplay | Video Autoplay | Whether the video starts playing on its own as the page loads. |
| Video Loop | Video Loop | Whether the video starts again by itself when it reaches the end. |
| Video Muted | Video Muted | Whether the video starts with its sound turned off. |
| Video Plays Inline | Video Plays Inline | Whether phones play the video inside the page instead of taking over the screen. |
| Video Preload | Video Preload | How much of the video the browser downloads before anyone presses play. |
| Video Intrinsic Width | Video Intrinsic Width | The video's real pixel width, which lets the browser reserve the right space before it loads. |
| Video Intrinsic Height | Video Intrinsic Height | The video's real pixel height, set alongside the width so the browser knows its shape. |
| Video Transformations | Video Transformations | Extra instructions for cropping and reshaping the video as it is delivered. |
Watch out for
- If the library is empty, upload under Videos on the team dashboard before opening Video Selector. Images and videos are separate libraries.
- Autoplay only works when the video is also muted. Browsers block autoplaying sound, so setting Autoplay on its own leaves a video that appears frozen.
- Set Video Intrinsic Width and Height. Video files are slow to arrive, which gives the page a long window in which to jump as it loads.
- Video is invisible to anyone who cannot watch it, and it carries no alt text. If it says something your page depends on, say it in words nearby as well.
- Size, spacing, and borders are column settings. Set Width and Height on the column that holds the video — the two Intrinsic settings here describe the file rather than resize it.
Where to go next
- All RuleCMS components
- Attribute Reference — the column and row settings that shape how this component sits on the page: spacing, size, colour, and typography.
- The Composer — the editing surface it lives in.
- Media Assets — uploading and organizing the videos this component picks from.