Enhanced Media Embed plugin

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="mediaembed">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="OpenTiny Logo" width="128" height="128"></p>

  <h2 style="text-align: center;">Welcome to the Enhanced Media Embed plugin demo!</h2>
  <p>Try pasting the sharing URL for video or audio content from a popular media provider, such as <a href="https://www.youtube.com/">YouTube</a>.</p>
  <p>The Enhanced Media Embed plugin will convert the URL into embed media.</p>
</textarea>
tinymce.init({
  selector: 'textarea#mediaembed',
  plugins: 'media mediaembed code lists',
  toolbar: 'media code',
  height: 600,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Installation

For the moment the Enhanced Media Embed plugin has to be used in conjunction with the media plugin, so:

  1. Make sure you have the media plugin added to the plugins list.

  2. Add the mediaembed plugin to the plugins list.

Example Cloud Configuration

The service URL is already configured with Tiny Cloud. Simply specify the media and mediaembed plugins, and optionally a mediaembed_max_width

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'media mediaembed',
  mediaembed_max_width: 450
});

Example Self-hosted Configuration

In a Self-hosted installation, please ensure you configure the URL to the service with the mediaembed_service_url parameter.

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'media mediaembed',
  mediaembed_service_url: 'SERVICE_URL',
  mediaembed_max_width: 450
});

CSS

To make the embeddable snippets display correctly on your site, be sure to add the required summary card CSS.

.ephox-summary-card {
  border: 1px solid #AAA;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  padding: 10px;
  overflow: hidden;
  margin-bottom: 1em;
}

.ephox-summary-card a {
  text-decoration: none;
  color: inherit;
}

.ephox-summary-card a:visited {
  color: inherit;
}

.ephox-summary-card-title {
  font-size: 1.2em;
  display: block;
}

.ephox-summary-card-author {
  color: #999;
  display: block;
  margin-top: 0.5em;
}

.ephox-summary-card-website {
  color: #999;
  display: block;
  margin-top: 0.5em;
}

.ephox-summary-card-thumbnail {
  max-width: 180px;
  max-height: 180px;
  margin-left: 2em;
  float: right;
}

.ephox-summary-card-description {
  margin-top: 0.5em;
  display: block;
}

Usage

The plugin can be used in two ways, either by simply entering a URL on an empty line and pressing the enter key - or by entering the URL into the media plugin’s dialog window. Either way the URL will be handled by the service backend and the returned code will be embedded into the editor.

Options

mediaembed_inline_styles

This option will inline all styles, instead of using CSS classes, when rendering the embedded snippet. This is useful when the additional CSS classes can’t be added to your site. Defaults to false.

Type: Boolean

Default value: false

Possible values: true, false

Example: using mediaembed_inline_styles

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'media mediaembed',
  mediaembed_inline_styles: true
});

mediaembed_service_url

This option specifies the URL to the service that will handle your requests and return the embeddable snippets used by the Media Embed plugin. This option is not required for Tiny Cloud.

Type: String

Example: using mediaembed_service_url

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'media mediaembed',
  mediaembed_service_url: 'http://example.com/mediaembed_service'
});

mediaembed_max_width

This option specifies a maximum width in pixels of the embedded content. Defaults to 650.

Type: Number

Default value: 650

Example: using mediaembed_max_width

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'media mediaembed',
  mediaembed_max_width: 450
});