# MediaEmbedConfig

interface

The configuration of the media embed features.

Read more about [configuring the media embed feature](../features/media-embed/media-embed-configuration.md).

```typescript
ClassicEditor
	.create( {
			mediaEmbed: ... // Media embed feature options.
	} )
	.then( ... )
	.catch( ... );
```

See [all editor options](module_core_editor_editorconfig-EditorConfig.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L29)

<a id="properties">

## Properties

<a id="member-elementName">

### `elementName?: string`

Overrides the element name used for "semantic" data.

This is not relevant if [`config.mediaEmbed.previewsInData`](#member-previewsInData) is set to `true`.

When not set, the feature produces the `<oembed>` tag:

```html
<figure class="media">
	<oembed url="https://url"></oembed>
</figure>
```

To override the element name with, for instance, the `o-embed` name:

```typescript
mediaEmbed: {
	elementName: 'o-embed'
}
```

This will produce semantic data with the `<o-embed>` tag:

```html
<figure class="media">
	<o-embed url="https://url"></o-embed>
</figure>
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L168)

Defaults to `'oembed'`

<a id="member-extraProviders">

### `extraProviders?: Array<MediaEmbedProvider>`

The additional media providers supported by the editor. This configuration helps extend the default [`providers`](#member-providers).

```typescript
ClassicEditor
	.create( {
		plugins: [ MediaEmbed, ... ],
		mediaEmbed: {
			extraProviders: [
				{
					 name: 'extraProvider',
					 url: /^example\.com/media/(\w+)/,
					 html: match => '...'
				},
				...
				]
		}
	} )
	.then( ... )
	.catch( ... );
```

See the [provider syntax](module_media-embed_mediaembedconfig-MediaEmbedProvider.md) to learn more.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L121)

<a id="member-previewsInData">

### `previewsInData?: boolean`

Controls the data format produced by the feature.

When `false` (default), the feature produces "semantic" data, i.e. it does not include the preview of the media, just the `<oembed>` tag with the `url` attribute:

```typescript
<figure class="media">
	<oembed url="https://url"></oembed>
</figure>
```

When `true`, the media is represented in the output in the same way it looks in the editor, i.e. the media preview is saved to the database:

```typescript
<figure class="media">
	<div data-oembed-url="https://url">
		<iframe src="https://preview"></iframe>
	</div>
</figure>
```

**Note:** Media without preview are always represented in the data using the "semantic" markup regardless of the value of the `previewsInData`. Learn more about different kinds of media in the [`config.mediaEmbed.providers`](#member-providers) configuration description.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L200)

Defaults to `false`

<a id="member-providers">

### `providers?: Array<MediaEmbedProvider>`

The default media providers supported by the editor.

The names of providers with rendering functions (previews):

* "dailymotion",
* "spotify",
* "youtube",
* "vimeo"

The names of providers without rendering functions:

* "instagram",
* "twitter",
* "googleMaps",
* "flickr",
* "facebook"

See the [provider syntax](module_media-embed_mediaembedconfig-MediaEmbedProvider.md) to learn more about different kinds of media and media providers.

**Note**: The default media provider configuration may not support all possible media URLs, only the most common are included.

Media without rendering functions are always represented in the data using the "semantic" markup. See [`config.mediaEmbed.previewsInData`](#member-previewsInData) to learn more about possible data outputs.

The priority of media providers corresponds to the order of configuration. The first provider to match the URL is always used, even if there are other providers that support a particular URL. The URL is never matched against the remaining providers.

To discard **all** default media providers, simply override this configuration with your own [definitions](module_media-embed_mediaembedconfig-MediaEmbedProvider.md):

```typescript
ClassicEditor
	.create( {
		plugins: [ MediaEmbed, ... ],
		mediaEmbed: {
			providers: [
				{
					 name: 'myProvider',
					 url: /^example\.com/media/(\w+)/,
					 html: match => '...'
				},
				...
				]
		}
	} )
	.then( ... )
	.catch( ... );
```

You can take inspiration from the default configuration of this feature which you can find in: https\://github.com/ckeditor/ckeditor5-media-embed/blob/master/src/mediaembedediting.js

To **extend** the list of default providers, use [`config.mediaEmbed.extraProviders`](#member-extraProviders).

To **remove** certain providers, use [`config.mediaEmbed.removeProviders`](#member-removeProviders).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L94)

<a id="member-removeProviders">

### `removeProviders?: Array<string>`

The list of media providers that should not be used despite being available in [`config.mediaEmbed.providers`](#member-providers) and [`config.mediaEmbed.extraProviders`](#member-extraProviders)

```typescript
mediaEmbed: {
	removeProviders: [ 'youtube', 'twitter' ]
}
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L134)

<a id="member-resizeOptions">

### `resizeOptions?: Array<MediaEmbedResizeOption>`

The available media resize options.

Used to populate the resize dropdown (`'resizeMediaEmbed'`) or the standalone resize buttons (`'resizeMediaEmbed:25'`, `'resizeMediaEmbed:original'`, etc.) placed in [`config.mediaEmbed.toolbar`](#member-toolbar).

Example — dropdown form:

```typescript
mediaEmbed: {
	toolbar: [ 'resizeMediaEmbed' ],
	resizeOptions: [
		{ name: 'resizeMediaEmbed:original', value: null, icon: 'original' },
		{ name: 'resizeMediaEmbed:25',	   value: '25',  icon: 'small'   },
		{ name: 'resizeMediaEmbed:50',	   value: '50',  icon: 'medium'  },
		{ name: 'resizeMediaEmbed:75',	   value: '75',  icon: 'large'   },
		{ name: 'resizeMediaEmbed:custom',   value: 'custom', icon: 'custom' }
	]
}
```

Example — standalone buttons form:

```typescript
mediaEmbed: {
	toolbar: [ 'resizeMediaEmbed:25', 'resizeMediaEmbed:50', 'resizeMediaEmbed:75',
			   'resizeMediaEmbed:original', 'resizeMediaEmbed:custom' ],
	resizeOptions: [
		{ name: 'resizeMediaEmbed:original', value: null,	 icon: 'original' },
		{ name: 'resizeMediaEmbed:custom',   value: 'custom', icon: 'custom'   },
		{ name: 'resizeMediaEmbed:25',	   value: '25',	 icon: 'small'	},
		{ name: 'resizeMediaEmbed:50',	   value: '50',	 icon: 'medium'   },
		{ name: 'resizeMediaEmbed:75',	   value: '75',	 icon: 'large'	}
	]
}
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L339)

<a id="member-resizeUnit">

### `resizeUnit?: 'px' | '%'`

The resize unit applied to the media width.

Possible values: `'%'` (default) or `'px'`.

```typescript
mediaEmbed: {
	resizeUnit: 'px'
}
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L299)

Defaults to `'%'`

<a id="member-styles">

### `styles?: MediaStyleConfig`

The [media embed style](module_media-embed_mediaembedstyle-MediaEmbedStyle.md) feature configuration.

Available out of the box: five built-in alignment styles — `'alignLeft'`, `'alignBlockLeft'`, `'alignCenter'` (default), `'alignBlockRight'`, `'alignRight'`.

Restrict the set to a subset of built-ins:

```typescript
mediaEmbed: {
	styles: {
		options: [ 'alignBlockLeft', 'alignCenter', 'alignBlockRight' ]
	}
}
```

Override fields of a built-in by re-declaring with the same `name`:

```typescript
mediaEmbed: {
	styles: {
		options: [
			{ name: 'alignCenter', title: 'Center' },
			'alignLeft',
			'alignRight'
		]
	}
}
```

Register a custom (e.g. semantical) style by supplying a complete definition:

```typescript
import sideIcon from 'path/to/icon.svg';

mediaEmbed: {
	styles: {
		options: [
			'alignCenter',
			{
				name: 'side',
				title: 'Side media',
				icon: sideIcon,
				className: 'media-style-side'
			}
		]
	}
}
```

When omitted, all five built-in styles are available.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L284)

<a id="member-toolbar">

### `toolbar?: Array<ToolbarConfigItem | MediaStyleDropdownDefinition>`

Items to be placed in the media embed toolbar. This option requires adding [`MediaEmbedToolbar`](module_media-embed_mediaembedtoolbar-MediaEmbedToolbar.md) to the plugin list.

Each entry is one of:

* a component name (string) — including the built-in alignment buttons (e.g. `'mediaEmbed:alignCenter'`) and built-in dropdowns (`'mediaEmbed:wrapText'`, `'mediaEmbed:breakText'`),
* a custom split-button media style dropdown definition (object) following the [`MediaStyleDropdownDefinition`](module_media-embed_mediaembedconfig-MediaStyleDropdownDefinition.md) shape — registered alongside the built-in dropdowns and inheriting the same auto-skip / fallback-defaultItem behavior,
* a generic nested toolbar grouping (`{ label, items }`) — same shape as in [`config.toolbar`](module_core_editor_editorconfig-EditorConfig.md#member-toolbar).

```typescript
mediaEmbed: {
	toolbar: [
		'mediaEmbed:alignCenter',
		{
			name: 'mediaEmbed:myAlignments',
			title: 'Alignment',
			items: [ 'mediaEmbed:alignBlockLeft', 'mediaEmbed:alignBlockRight' ],
			defaultItem: 'mediaEmbed:alignBlockLeft'
		}
	]
}
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L230)

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)
