---
title: "Enhanced Media Embed plugin"
description: "Add rich media previews inside TinyMCE."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/introduction-to-mediaembed/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/introduction-to-mediaembed/index.md"
version: "6"
last_updated: "2026-06-15T08:51:58Z"
tokens: 1279
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/introduction-to-mediaembed/).
# Enhanced Media Embed plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).
The **Enhanced Media Embed** plugin is a [premium TinyMCE plugin](/pricing/) that will take a URL, send it to a backend service that returns an embeddable snippet of code, and add that code to the editor. That typically takes the form of rich media such as audio, video and social media cards.

## Interactive example

**Example**

```js
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](../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](../editor-and-features/). Simply specify the `media` and `mediaembed` plugins, and optionally a `mediaembed_max_width`

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

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

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

```js
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. Please follow these [instructions](../introduction-to-premium-selfhosted-services/) to configure the **WAR** file that you will get as a part of your [TinyMCE Enterprise subscription](/pricing/). This option is not required for [Tiny Cloud](../editor-and-features/).

**Type:** `String`

#### Example: using `mediaembed_service_url`

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

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

## Downloading Enhanced Media Embed plugin

A [TinyMCE Enterprise subscription](/pricing/) includes the ability to download and install the **Media Embed** plugin and a **WAR** file to access the service backend. Please follow these [instructions](../introduction-to-premium-selfhosted-services/#set-up-editor-client-instances-to-use-the-server-side-functionality) to configure the **WAR** file.