---
title: "Media plugin"
description: "Add HTML5 video and audio elements."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/media/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/media/index.md"
version: "6"
last_updated: "2022-11-30T01:26:11Z"
tokens: 2062
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/media/).
# Media plugin
The `media` plugin provides users with the ability to add HTML5 video and audio elements to the editable area.
It also adds the `Insert/edit video` menu item under the `Insert` menu and adds an `Insert/edit video` toolbar button.
## Basic setup
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media'
});
```
## Options
These options affect the execution of the `media` plugin, making it possible to disable parts of the media dialog made available to an end-user inserting or editing media items.
In addition there are options here for disabling the cross-site scripting (XSS) sanitation filter. This filter is enabled by default for the `media` plugin.
### `audio_template_callback`
This option allows you to specify the function that will return the HTML embed code of the audio media that you are attempting to insert into TinyMCE.
**Type:** `Function`
#### Example: using `audio_template_callback`
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
audio_template_callback: (data) =>
''
});
```
### `iframe_template_callback`
> **Note:** This feature is only available for TinyMCE 6.1 and later.
This option allows you to specify the function that will return the HTML embed code of the iframe media that you are attempting to insert into TinyMCE.
**Type:** `Function`
#### Example: using `iframe_template_callback`
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
iframe_template_callback: (data) =>
``
});
```
### `media_alt_source`
This options allows you disable the `Alternative source` input field in the media dialog.
**Type:** `Boolean`
**Default value:** `true`
**Possible values:** `true`, `false`
#### Example: using `media_alt_source`
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
media_alt_source: false
});
```
### `media_dimensions`
This options allows you disable the `Dimensions` input fields in the media dialog.
**Type:** `Boolean`
**Default value:** `true`
**Possible values:** `true`, `false`
#### Example: using `media_dimensions`
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
media_dimensions: false
});
```
### `media_filter_html`
This option allows you disable the XSS sanitation filter for video/object elements. Scripts, conditional comments, etc, can’t be used within these elements by default for security reasons. If you want to include that and have server side sanitizers or if you trust your users, then you can disable this feature.
**Type:** `Boolean`
**Default value:** `true`
**Possible values:** `true`, `false`
#### Example: using `media_filter_html`
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
media_filter_html: false
});
```
### `media_live_embeds`
When you enable this option users will see a live preview of embedded video content within the editable area, rather than a placeholder image. This means that users can play a video clip, such as YouTube, within the editor.
This option is enabled by default and accepts URLs input into the source field or embed field in the dialog box by the user.
**Type:** `Boolean`
**Default value:** `true`
**Possible values:** `true`, `false`
#### Example: using `media_live_embeds`
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
media_live_embeds: true
});
```
### `media_poster`
To remove the `Poster` input field in the media dialog, set this option to `false`.
**Type:** `Boolean`
**Default value:** `true`
**Possible values:** `true`, `false`
#### Example: using `media_poster`
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
media_poster: false
});
```
### `media_url_resolver`
This option allows you to specify a function that will be used to replace TinyMCE’s default media embed logic with your own, custom logic.
The media url resolver function takes three arguments: `data`, a `resolve` callback and a `reject` callback. The `data` argument will be an object with a `url` property on it. In your custom handler function you can then handle the `url` in whatever way you want and return the HTML you want to embed by calling the `resolve` callback and passing it an object with the HTML set on the `html` property, like this: `resolve({ html: 'YOUR_HTML' })`.
If, in your handler, you would like to fall back to the default media embed logic, call the `resolve` callback with an object where the `html` property is set to an empty string, like this: `resolve({ html: '' })`.
If something goes wrong in your function and you want to show an error to the user you can do so by calling the `reject` callback with an object where the message you want to show the user is set under the `msg` property, like this: `reject({ msg: 'YOUR_ERROR_MESSAGE' })`. The message entered will be shown in an error notification to the user.
**Type:** `Function`
#### Example: using `media_url_resolver`
The following example simply checks if the url contains some special url and returns an iframe if it does. Otherwise it calls the `resolve` callback with an empty string, falling back to the default media embed logic.
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
media_url_resolver: (data, resolve/*, reject*/) => {
if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
const embedHtml = ``;
resolve({ html: embedHtml });
} else {
resolve({ html: '' });
}
}
});
```
### `video_template_callback`
This option allows you to specify the function that will return the HTML embed code of the video media that you are attempting to insert into TinyMCE.
**Type:** `String`
#### Example: using `video_template_callback`
```js
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'media',
toolbar: 'media',
video_template_callback: (data) =>
`'
});
```
## Toolbar buttons
The Media plugin provides the following toolbar buttons:
| Toolbar button identifier | Description |
| --- | --- |
| `media` | Creates/Edits embedded media elements. |
These toolbar buttons can be added to the editor using:
- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).
## Menu items
The Media plugin provides the following menu items:
| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `media` | Insert | Opens the media dialog. |
These menu items can be added to the editor using:
- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).
## Commands
The Media plugin provides the following TinyMCE command.
| Command | Description |
| --- | --- |
| mceMedia | Opens the insert/edit media dialog. |
Example
```js
tinymce.activeEditor.execCommand('mceMedia');
```