Skip to content
Edytor
Esc
↑↓navigate↵open⌘Jpreview
On this page

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 video with a safe src, or a source child with one (bare, or in a figure whose figcaption becomes the caption). Without the plugin, a pasted video is 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).

Was this page helpful?