# MediaEmbedProvider

interface

The media embed provider descriptor. Used in [`config.mediaEmbed.providers`](module_media-embed_mediaembedconfig-MediaEmbedConfig.md#member-providers) and [`config.mediaEmbed.extraProviders`](module_media-embed_mediaembedconfig-MediaEmbedConfig.md#member-extraProviders).

See [`MediaEmbedConfig`](module_media-embed_mediaembedconfig-MediaEmbedConfig.md) to learn more.

```typescript
{
	name: 'example',

	// The following RegExp matches https://www.example.com/media/{media id},
	// (either with "http(s)://" and "www" or without), so the valid URLs are:
	//
	// * https://www.example.com/media/{media id},
	// * http://www.example.com/media/{media id},
	// * www.example.com/media/{media id},
	// * example.com/media/{media id}
	url: /^example\.com/media/(\w+)/,

	// The rendering function of the provider.
	// Used to represent the media when editing the content (i.e. in the view)
	// and also in the data output of the editor if semantic data output is disabled.
	html: match => `The HTML representing the media with ID=${ match[ 1 ] }.`
}
```

You can allow any sort of media in the editor using the "allow–all" `RegExp`. But mind that, since URLs are processed in the order of configuration, if one of the previous `RegExps` matches the URL, it will have a precedence over this one.

```typescript
{
	name: 'allow-all',
	url: /^.+/
}
```

To implement responsive media, set an `aspect-ratio` on the iframe. The HTML `width` and `height` attributes act as the intrinsic size (useful for layout hints in containers like table cells), while CSS `width: 100%` and `height: auto` make the element scale with its container while preserving the declared aspect ratio. The iframe is wrapped in a plain `<div>` so external styles or queries that target this wrapper continue to work:

```typescript
{
	...
	html: match =>
		'<div>' +
			`<iframe src="..." width="1280" height="720" ` +
				`style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" ` +
				'frameborder="0" allowfullscreen>' +
			'</iframe>' +
		'</div>'
}
```

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

<a id="properties">

## Properties

<a id="member-html">

### `html?: ( match: RegExpMatchArray ) => string`

The rendering function of the media. The function receives the entire matching array from the corresponding `url` `RegExp` as an argument, allowing rendering a dedicated preview of the media identified by a certain ID or a hash. When not defined, the media embed feature will use a generic media representation in the view and output data. Note that when [`config.mediaEmbed.previewsInData`](module_media-embed_mediaembedconfig-MediaEmbedConfig.md#member-previewsInData) is `true`, the rendering function **will always** be used for the media in the editor data output.

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

<a id="member-name">

### `name: string`

The name of the provider. Used e.g. when [removing providers](module_media-embed_mediaembedconfig-MediaEmbedConfig.md#member-removeProviders).

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

<a id="member-url">

### `url: ArrayOrItem<RegExp>`

The `RegExp` object (or array of objects) defining the URL of the media. If any URL matches the `RegExp`, it becomes the media in the editor model, as defined by the provider. The result of matching (output of `String.prototype.match()`) is passed to the `html` rendering function of the media.

**Note:** You do not need to include the protocol (`http://`, `https://`) and `www` subdomain in your `RegExps`, they are stripped from the URLs before matching anyway.

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

---

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