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

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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  audio_template_callback: (data) =>
    '<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>'
});

iframe_template_callback

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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  iframe_template_callback: (data) =>
    `<iframe title="${data.title}" width="${data.width}" height="${data.height}" src="${data.source}"></iframe>`
});

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

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

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

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

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

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.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  media_url_resolver: (data) => {
    return new Promise((resolve) => {
      if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
        const 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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'media',
  toolbar: 'media',
  video_template_callback: (data) =>
    `<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>'
});

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 Media plugin provides the following menu items:

Menu item identifier Default Menu Location Description

media

Insert

Opens the media dialog.

These menu items can be added to the editor using:

Commands

The Media plugin provides the following TinyMCE command.

Command Description

mceMedia

Opens the insert/edit media dialog.
Example
tinymce.activeEditor.execCommand('mceMedia');