---
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/5/media/index.md"
version: "5"
last_updated: "2024-04-16T01:50:26Z"
tokens: 1857
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/media/).
# Media plugin

The `media` plugin adds the ability for users to be able to add HTML5 video and audio elements to the editable area. It also adds the item `Insert/edit video` under the `Insert` menu as well as a toolbar button.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  menubar: 'insert',
  toolbar: 'media'
});
```

## Options

These settings affect the execution of the `media` plugin. Namely the ability to disable parts of the media dialog box when inserting/editing media items. In addition, the user may disable the cross-site scripting sanitation filter for video/object elements here.

### `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:** `String`

#### Example: Using `audio_template_callback`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  menubar: 'insert',
  toolbar: 'media',
  audio_template_callback: function(data) {
   return '<audio controls>' + '\n<source src="' + data.source + '"' + (data.sourcemime ? ' type="' + data.sourcemime + '"' : '') + ' />\n' + (data.altsource ? '<source src="' + data.altsource + '"' + (data.altsourcemime ? ' type="' + data.altsourcemime + '"' : '') + ' />\n' : '') + '</audio>';
 }
});
```

### `media_alt_source`

This options allows you to 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',
  menubar: 'insert',
  toolbar: 'media',
  media_alt_source: false
});
```

### `media_dimensions`

This options allows you to 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',
  menubar: 'insert',
  toolbar: 'media',
  media_dimensions: false
});
```

### `media_filter_html`

This option allows you to 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',
  menubar: 'insert',
  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',
  menubar: 'insert',
  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',
  menubar: 'insert',
  toolbar: 'media',
  media_poster: false
});
```

### `media_scripts`

> **Important:** This option has been deprecated in TinyMCE 5.10 and will be removed in TinyMCE 6.0.
This option allows you to embed videos using script elements.

**Type:** `Array`

#### Example: Using `media_scripts`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  menubar: 'insert',
  toolbar: 'media',
  media_scripts: [
   {filter: 'http://media1.example.com'},
   {filter: 'http://media2.example.com', width: 100, height: 200}
 ]
});
```

### `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 you in your handler would like fall back to the default media embed logic you can simply 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: function (data, resolve/*, reject*/) {
    if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
      var embedHtml = '<iframe src="' + data.url +
      '" width="400" height="400" ></iframe>';
      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',
  menubar: 'insert',
  toolbar: 'media',
  video_template_callback: function(data) {
   return '<video width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' + '<source src="' + data.source + '"' + (data.sourcemime ? ' type="' + data.sourcemime + '"' : '') + ' />\n' + (data.altsource ? '<source src="' + data.altsource + '"' + (data.altsourcemime ? ' type="' + data.altsourcemime + '"' : '') + ' />\n' : '') + '</video>';
 }
});
```