Page Embed plugin

Interactive example

This example shows how to use the Page Embed plugin to embed a page in the content in a responsive or exactly sized iframe. For more information on the Page Embed plugin, see the docs.

  • TinyMCE

  • HTML

  • CSS

  • JS

  • Edit on CodePen

<textarea id="page-embed">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="" alt="TinyMCE Logo" width="128" height="128" /></p>

  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

  <h2>Got questions or need help?</h2>

    <li>Our <a href="">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="">TinyMCE premium plans</a>.</li>

  <h2>A simple table to play with</h2>

  <table style="border-collapse: collapse; width: 100%;" border="1">

  <h2>Found a bug?</h2>

    If you think you have found a bug please create an issue on the <a href="">GitHub repo</a> to report it to the developers.

  <h2>Finally ...</h2>

    Don't forget to check out our other product <a href="" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
.tiny-pageembed--1by1 {
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;

.tiny-pageembed--1by1::before {
  content: "";
  display: block;

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

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

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

.tiny-pageembed--1by1::before {
  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%;
  selector: 'textarea#page-embed',
  plugins: 'pageembed code preview',
  toolbar: 'pageembed code preview',
  menubar: 'view',
  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:14px }'