---
title: "Page Embed plugin"
description: "Easily inserts iframe into the content."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/pageembed/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/pageembed/index.md"
version: "latest"
last_updated: "2026-06-15T05:48:02Z"
tokens: 1962
---
# Page Embed plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).
The **Page Embed** plugin embeds a page in the content using an iframe (Inline frames). The size of these iframes can be configured to be responsive or another user-defined dimension. The ability to use iframes helps create visually engaging content which is very useful for:

- Online courses and learning materials.
- Online advertising
- Creating multimedia content

## Try our Page Embed plugin demo

**Example**

```js
tinymce.init({
  selector: 'textarea#page-embed',
  plugins: 'pageembed code preview',
  toolbar: 'pageembed code preview',
  tiny_pageembed_classes: [
    { text: 'Big embed', value: 'my-big-class' },
    { text: 'Small embed', value: 'my-small-class' }
  ],
  height: 500,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

## Creating a Page Embed toolbar button

Use the following script to create a Page Embed toolbar button:

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

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).
**Result**: The
![Page Embed](../_images/icons/embed-page.svg)
(**Page Embed**) button appears in the toolbar menu.

## Using Page Embed

Use the following procedure for embedding an iframe into the content:

1. Click on the

![Page Embed](../_images/icons/embed-page.svg)
(**Page Embed**) toolbar button.
2. The **InsertEdit Iframe** dialog box appears.

![InsertEdit Iframe](../_images/insert-iframes.png)
3. In the **General** tab, enter the url in the **Source** field, or click on the

![Source](../_images/icons/browse.svg)
(**Source**) icon to upload a file.
4. For setting the iframe size, select the preferred option from the **Size** drop-down menu.

  - **Inline Value** is used to insert an iframe within a line. To set the dimensions of an inline iframe, provide the values in pixels in the **Width** and **Height** input box.

    - The default values are **Width** `350px` and **Height** `260px`. Click the

![Constrain Proportions](../_images/icons/lock.svg)
(**Constrain Proportions**) lock icon to change the default values.

> **Note:** The **Width** and **Height** fields are only available if the **Inline Value** value option is selected.
  - **Responsive** is used to make embedded content responsive using CSS, so that content such as video and calendars resize with the browser’s viewport. There are four options provided to set the responsive iframe size.

    - **Responsive-21X9**
    - **Responsive-16X9**
    - **Responsive-4X3**
    - **Responsive-1X1**

> **Note:** The **Responsive** option has pre-defined width and height values. The **Width** and **Height** fields are not available if one of the **Responsive** values are selected.
5. In the **Advanced** tab, provide a name and title for the iframe in the **Name** and **Title** fields.
6. The **Long description URL** field can be used to describe an iframe by including text in a separate resource when a short text alternative does not adequately convey the function or information provided in the iframe.

  - Click on the

![Source](../_images/icons/browse.svg)
(**Long description URL**) icon to upload a description file.
7. Click on the **Show iframe border** checkbox to display iframe borders.
8. Click on the **Scrollbar** checkbox to add scrollbar to the iframe.
9. Click **Save** to save and exit or **Cancel** to dismiss and exit.

**Result**: An iframe of the configured size is inserted in the desired location within the content.

> **Note:** Not all pages allow embedding, as the X-Frame-Options header can be set to block embedding. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) for more information.

## Options

### `tiny_pageembed_classes`

The `tiny_pageembed_classes` takes an array of objects with `text` and `value` properties that will populate the size selection fields in the plugin dialog.

**Type:** `Array`

**Default value:**

```js
[
  {
    text: 'Responsive - 21x9',
    value: 'tiny-pageembed--21by9'
  },
  {
    text: 'Responsive - 16x9',
    value: 'tiny-pageembed--16by9'
  },
  {
    text: 'Responsive - 4x3',
    value: 'tiny-pageembed--4by3'
  },
  {
    text: 'Responsive - 1x1',
    value: 'tiny-pageembed--1by1'
  }
]
```

#### Example: using `tiny_pageembed_classes`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'pageembed',
  toolbar: 'pageembed',
  tiny_pageembed_classes: [
    { text: 'Big embed', value: 'my-big-class' },
    { text: 'Small embed', value: 'my-small-class' }
  ]
});
```

#### Example: disable select

When the `tiny_pageembed_classes` value is set to an empty array, the size selection fields are not available and only exact sizes can be set. Use the following script to disable `select` using the `tiny_pageembed_classes` option:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'pageembed',
  toolbar: 'pageembed',
  tiny_pageembed_classes: []
});
```

### `tiny_pageembed_inline_styles`

The `tiny_pageembed_inline_styles` option will inline all styles, while also keeping CSS classes, when rendering the embed content. 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: `tiny_pageembed_inline_styles`

To inline page embed styles:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'pageembed',
  tiny_pageembed_inline_styles: true
});
```

## Toolbar buttons

The Page Embed plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `pageembed` | Opens the insert or edit iframe dialog. |

These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Page Embed plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `pageembed` | Insert | Opens the insert or edit iframe dialog. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Default CSS

If the `tiny_pageembed_classes` setting is left undefined, the default classes will be used. As a result, a responsive size option can be selected.

> **Important:** The following CSS script must be added to the webpage for the default CSS to work correctly.

```css
.tiny-pageembed--21by9,
.tiny-pageembed--16by9,
.tiny-pageembed--4by3,
.tiny-pageembed--1by1 {
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.tiny-pageembed--21by9 {
  padding-top: 42.857143%;
}

.tiny-pageembed--16by9 {
  padding-top: 56.25%;
}

.tiny-pageembed--4by3 {
  padding-top: 75%;
}

.tiny-pageembed--1by1 {
  padding-top: 100%;
}

.tiny-pageembed--21by9 iframe,
.tiny-pageembed--16by9 iframe,
.tiny-pageembed--4by3 iframe,
.tiny-pageembed--1by1 iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
```
For more information on configuring CSS, refer to the [content_css](../add-css-options/#content_css) section.