---
title: Video
description: The video plugin adds Notion's video block, a video file in the browser's player, linked or uploaded through your upload function.
icon: video
---

`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.

```svelte title="Editor.svelte" check
<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](/docs/plugins/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](/docs/plugins/embed).

## Options

`createVideoPlugin()` takes no options. The empty block is drawn by the view's media empty plugin ([Menus and handles](/docs/customization/menus#empty-image-and-media-blocks)); with the uploads plugin listed, it has an Upload (`accept="video/*"`) and pasted and dropped video files become video blocks ([Pasted and dropped files](/docs/editor/clipboard#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](/docs/plugins/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](/docs/plugins/embed#styling)).