Contribute to this guideReport an issue

Embedding Media Resources with oEmbed Documentation

The optional Media Embed and Semantic Media Embed plugins, introduced in CKEditor 4.5, allow to embed resources (videos, images, tweets, etc.) hosted by other services (called the "content providers") in the editor.

When either Media Embed or Semantic Media Embed plugin is enabled and the content provider is configured, the   button is automatically added to the toolbar. Once clicked, it opens the Media Embed dialog window that lets you add the URL of the resource to be embedded. You can also paste that resource's URL into the editor content and it will be automatically embedded if the optional Auto Embed plugin is enabled.

We recommend to use the Iframely proxy service which supports over 1800 content providers such as YouTube, Vimeo, Twitter, Instagram, Imgur, SlideShare, or Google Maps, but you can configure the widgets to use another proxy service of your choice.

Using Media Embed with Auto Embed

The sample below uses the Media Embed plugin together with the Auto Embed and Enhanced Image plugins. Additional widget styles are defined to control widget size and alignment.

Try embedding more resources like the following. You can either paste these URLs into the editor or use the Media Embed dialog.

Related Features

Get Sample Source Code

  • Using Media Embed with Auto Embed
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Using Media Embed with Auto Embed</title>
      <script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="10" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor1', {
          extraPlugins: 'embed,autoembed,image2',
          height: 500,
    
          // Load the default contents.css file plus customizations for this sample.
          contentsCss: [
            'http://cdn.ckeditor.com/4.11.1/full-all/contents.css',
            'https://ckeditor.com/docs/vendors/4.11.1/ckeditor/assets/css/widgetstyles.css'
          ],
          // Setup content provider. See https://ckeditor.com/docs/ckeditor4/latest/guide/dev_media_embed
          embed_provider: '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}',
    
          // Configure the Enhanced Image plugin to use classes instead of styles and to disable the
          // resizer (because image size is controlled by widget styles or the image takes maximum
          // 100% of the editor width).
          image2_alignClasses: ['image-align-left', 'image-align-center', 'image-align-right'],
          image2_disableResizer: true
        });
      </script>
    </body>
    
    </html>