Video
The video plugin adds Notion's video block, a video file in the browser's player, linked or uploaded through your upload function.
createVideoPlugin() adds Notion’s video block: an “Embed a video” panel (your empty snippet, createMediaEmptyPlugin({ empty })) until the block has a source, then the browser’s player (<video controls>), with an editable caption. It is not a default plugin: list it.
<script lang="ts">
import { Edytor, createVideoPlugin, createUploadsPlugin } from 'edytor';
// Optional: the view's uploader (an Upload button, and pasted or dropped files).
const uploads = createUploadsPlugin({
upload: async (file) => {
const body = new FormData();
body.append('file', file);
const response = await fetch('/api/uploads', { method: 'POST', body });
return (await response.json()).url;
}
});
</script>
<Edytor plugins={[uploads, createVideoPlugin()]} />
A slash menu then lists “Video” under Media. Without the uploads plugin (createUploadsPlugin({ upload })), files are linked only. A YouTube or Vimeo link is not a video file: it plays in an embed.
Options
createVideoPlugin() takes no options. The empty block is drawn by the view’s media empty plugin (Menus and handles); with the uploads plugin listed, it has an Upload (accept="video/*") and pasted and dropped video files become video blocks (Pasted and dropped files). The answer is stored only when the block is still there, of its kind and without a source: a source a collaborator set while the upload ran stays.
The kind
| Kind | Element | Data | Preset |
|---|---|---|---|
video |
figure |
{ src: string } |
Video (🎬, group Media, keywords movie, mp4, clip) |
A source is accepted only when it is an http:/https: URL with a host or a blob: URL of one (safeMediaSrc), never data: or a script URL; any other stored value shows no player. The player has controls, preload="metadata" and playsinline.
The block is void like the image, and its only text is the caption. The command id is block.video. Its role is in defaultSemantics. In a readonly view the empty block is a passive placeholder.
Clipboard
- Copying exports
<figure><video src="…" controls></video><figcaption>caption</figcaption></figure>. - Pasting HTML imports a
videowith a safesrc, or asourcechild with one (bare, or in afigurewhosefigcaptionbecomes the caption). Without the plugin, a pastedvideois dropped.
Styling
| Selector | Matches |
|---|---|
[data-edytor-type='video'] |
The figure |
[data-edytor-video] |
The wrapper of the video |
The empty state uses the shared media selectors (see Embed).