Slots
The named places in a layout where plugins put their UI.
A plugin's controls appear without you placing them because plugins add components to named slots, and the layout renders those slots. VideoPlayer has all of them, and a layout of your own only renders the ones you include.
The slots
| Slot | Where it is in VideoPlayer | Used by |
|---|---|---|
overlay | Above the media, below the controls | Ads, autoplay, captions, Chromecast, gestures, hotkeys, playlist |
top-start | The group at the top left | Fullscreen, PiP, AirPlay, Chromecast |
top-end | The group at the top right, before the volume | Nothing yet, so it's yours |
transport-start | Before the buttons in the centre | Playlist |
transport-end | After the buttons in the centre | Playlist |
controls-start | In its own pill, at the start of the row above the timeline | Live |
controls-end | In the group above the timeline, before the settings button | Captions, episodes, info |
title | Above the timeline, when VideoPlayer has no title, eyebrow, or description | Playlist |
menu | Inside the settings menu | Audio tracks, captions, chapters, quality, speed |
timeline-track | Inside the timeline's track | Chapters |
timeline-preview | In the preview above the timeline | Chapters, thumbnails |
Within a slot, components appear in the order of your plugins list.
Use slots in your own layout
Render a Slot wherever you want those controls to go:
tsx
<Video.Root src="/video.mp4" plugins={plugins}> <Video.Media /> <Video.Slot name="overlay" /> <Video.Controls> <Video.ControlRow> <Video.ControlGroup> <Video.PlayPause /> <Video.Timeline /> </Video.ControlGroup> <Video.ControlGroup> <Video.Slot name="controls-end" /> <Video.Slot name="top-start" /> <Video.SettingsMenu /> </Video.ControlGroup> </Video.ControlRow> </Video.Controls></Video.Root>Leave a slot out if you'd rather place those parts by hand. Every plugin control is also an export of the plugin's own entry:
tsx
import { Fullscreen } from "react-video-kit/fullscreen";<Video.ControlGroup> <Fullscreen /></Video.ControlGroup>;With top-start left out, nothing renders twice.
Add to a slot
Your own plugin can contribute to any slot, or to one with a new name:
tsx
import { definePlugin } from "react-video-kit/core";const share = definePlugin("share", () => ({ slots: { "controls-end": ShareButton },}));Writing a plugin goes through this in full.