1. 4.2
Media (oEmbed) Plugin
4.25 (5 votes)
91929 downloads oembed
  • Add to my editor
  • Download

    CKBuilder

    The recommended way to install all CKEditor add-ons is to create a custom build by using CKBuilder. To do that, click the Add to my editor button on the plugin page. When you are done, click the Build my editor button on the right side of the page to go to CKBuilder.

    Add-on Installation Instructions

    If you want to add the plugin manually, you will need to:

    1. Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
      http://example.com/ckeditor/plugins/oembed
    2. Enable the plugin by using the extraPlugins configuration setting. Example:
      config.extraPlugins = 'oembed';
    3. Download and configure all its dependencies, too.

    Add-on Dependencies

    Note: The plugin may have additional requirements. Check the add-on page and documentation for more details.

Media (oEmbed) Plugin

This Plugin allows to insert embedded content (such as photos, videos, audio, and other rich media) via the OEmbed API. You only have to provide the url to the site (It works also when the url is shortened) you want to embed and the plugin does the rest.

Demo Page

This Plugin uses the jquery-oembed-all Plugin located at https://github.com/starfishmod/jquery-oembed-all.

Currently Supported Sites...
Video

  • Youtube - oembed - YQL
  • Blip - oEmbed
  • Hulu - oEmbed
  • Vimeo - oEmbed
  • National film board of Canada - oEmbed
  • Qik - oEmbed
  • Dotsub - oEmbed
  • Clikthrough - oEmbed
  • Kino Map - oEmbed
  • Funny Or Die - Embedded
  • College Humour - Embedded
  • Metacafe - Embedded
  • embedr - Embedded
  • 5min - oEmbed is XML only - using YQL to translate it
  • ustream.tv - oEmbed is not JSONP enabled - using YQL to translate it
  • viddler - OGP
  • twitvid - Embedded
  • bambuser - Embedded
  • xtranormal - Embedded
  • Gametrailers - Embedded
  • Vzarr - Embedded
  • VHX - oembed
  • bambuser - oembed
  • dailymotion.com - oembed
  • animoto - oembed
  • justin.tv - YQL JSON
  • livestream - OGP
  • scivee - embedded
  • veoh - embedded
  • minoto-video - oembed using YQL
  • TrailerAddict - OGP
  • vodpod - oembed YQL - broken as the oembed has absolute positioning which breaks the display
  • fora.tv -OGP YQL
  • TED - OGP YQL
  • Aniboom - embedded
  • Comedy Central - OGP
  • snotr - embedded
  • zapiks - OGP
  • youku - embedded
  • wistia - Oembed


 

Audio

  • Soundcloud - oEmbed
  • HuffDuffer - oEmbed
  • BandCamp - YQL and Embedded
  • podomatic - OGP
  • rdio.com - oEmbed
  • hark.com - OGP
  • chirb.it - YQL and oembed
  • official.fm - YQL and oembed
  • mixcloud - YQL and oembed
  • shoudio - oembed
  • audioboo.fm - OGP
  • Spotify - OGP YQL

Photo

  • flickr - oEmbed
  • photobucket - oEmbed
  • instagram - oEmbed
  • yfrog - oEmbed
  • 23HQ - oEmbed
  • Smugmug - oEmbed
  • twitpic - OGP YQL
  • 500px.com - OGP
  • visual.ly - YQL Lookup
  • img.ly - Thumbnail view
  • imgur.com - Thumbnail view
  • twitgoo.com - Thumbnail view
  • gravatar - Thumbnail view when using mailto
  • pintrest - YQL - Embedded view of a sort.
  • circuitlab - image view
  • skitch - YQL oembed
  • graphic.ly - OGP
  • dribble - jsonp lookup
  • Lockerz - YQL lookup
  • AsciiArtFarts - YQL Lookup
  • lego cusoo - OGP over YQL
  • plannary - OGP over YQL
  • propic - OGP
  • avairy.com - OGP
  • lomography - ogp
  • weheartit - ogp
  • glogster - ogp
  • chart.ly - embedded
  • twitrpix - OGP
  • chictopia - OGP

Rich

  • Meetup - oEmbed
  • gigapans - Embedded
  • Slideshare - oEmbed
  • ebay - Embedded
  • scribd - Embedded
  • screenr - Embedded
  • tumblr- JSONP lookup
  • imdb - JSONP lookup via imdbapi.com
  • wikipedia- JSONP lookup
  • github- JSONP lookup (CSS)
  • eventful - OGP
  • myspace - OGP
  • live Journal - JSONP Lookup (CSS)
  • wordpress - oEmbed (wordpress.com, wp.me, blogs.cnn.com, techcrunch.com). I can add other wordpress sites as well.
  • circuitbee -Embedded
  • stack overflow - JSONP Lookup (CSS)
  • Facebook - JSONP Lookup (CSS)
  • Pastebin - Embedded
  • Pastie - YQL lookup
  • kickstarter - Embedded
  • issuu - OGP
  • reelapp.com - Embedded
  • Etsy - OGP over YQL
  • Amazon - Embedded - Requires Affiliate code
  • linkedin - Embedded IFRAME - found a link that works :)
  • Lanyrd - YQL (CSS)
  • twitter - Oembed - status only - but that is ok I think
  • github gist - oembed
  • speakerdeck - yql oembed
  • dipity - yql oembed
  • dailymile - oembed
  • deviantart - oembed
  • Roomshare Japan - oembed
  • mobypictures - oembed
  • prezi - embedded
  • popplet - embedded
  • authorstream - OGP
  • googlecalendar - Iframe
  • cacoo - oembed
  • pearltrees - embedded
  • urtak - oembed - is broken in iframe return atm -seems to be an embed.ly issue??
  • jotform - embedded
  • Urban Dictionary - YQL lookup
  • Ars Technica - YQL Lookup
  • Eventbrite - OGP YQL
  • last.fm OGP YQL
  • Rotten Tomatoes - OGP YQL
  • iFixit - OGP
  • qwiki - OGP
  • brighttalk - Meta info
  • tinychat - OGP
  • tourwrist - embedded
  • bnter - OGP
  • bigthink - OGP
  • wirewax - OGP
  • whosay - OGP
  • timetoast - embedded
  • tripline - OGP
  • jsfiddle - embedded

Dependencies: Requires the following plugins to work: Widget, Dialog.

Releases

Plugin versions CKEditor versions
4.5 4.4 4.3 4.2 4.1 4.0

Version: 1.17 - Download

Show notes
  • Bug fixes
unknown compatibilitycompatiblecompatibleincompatibleincompatibleincompatible

Version: 1.15 - Download

Show notes

- Bug fixes

unknown compatibilityunknown compatibilitycompatibleincompatibleincompatibleincompatible

Version: 1.11 - Download

Show notes
  • bug fixes
unknown compatibilityunknown compatibilityunknown compatibilitycompatiblecompatibleincompatible

Version: 1.10 - Download

Show notes
  • Bug fixes
unknown compatibilityunknown compatibilityunknown compatibilityunknown compatibilitycompatiblecompatible

Version: 1.04 - Download

Show notes

changes

  • switched from textarea to input
  • added label to url input
  • added tool tips to input fields
  • removed preview of content after inserting
unknown compatibilityunknown compatibilityunknown compatibilityunknown compatibilityunknown compatibilitycompatible

Screenshots

  • carousel
Log in to rate this plugin

Comments

Post a comment
  1. The content of this field is kept private and will not be shown publicly.
  2. *  Required fields
  1. Good idea. However, when right-clicking to edit it, it opens the iframe dialog. Ideally, it would open the oembed dialog, from a usability standpoint.

    • No i disagree as soon as the plugin injects the code there is no way to track it back to the origin, and it makes more sense to show the iframe dialog when selecting an iframe.

      • I just arrived back to comment more on this and see your response. No, it does not make sense from a usability standpoint. Usability-wise, you don't want one button to inject and another to edit. No sense there.

        Anyway, I came back to add to this that since these are normally urls entered, it doesn' make sense to have the textarea either. Should be an input. The textarea begs to have the larger chunks of embed code pasted into them which do not work. Again, from a usability standpoint, this doesn't make a lot of sense.

        So, it's an interesting idea, but our average everyday users are too confused by it and hardly know what to paste into it, so we're going to drop this one for now.

        • Anyway, I came back to add to this that since these are normally urls entered, it doesn' make sense to have the textarea either. Should be an input. The textarea begs to have the larger chunks of embed code pasted into them which do not work. Again, from a usability standpoint, this doesn't make a lot of sense.

           

          New Version is online i switched from textarea to input, i agree this much more sense.

          I just arrived back to comment more on this and see your response. No, it does not make sense from a usability standpoint. Usability-wise, you don't want one button to inject and another to edit. No sense there.

          The problem is that tecnically almost imposible to implement what you are suggesting. The Embed code is not generated by the plugin if its an oembed code the code is generated by the website. There is no way to make this process backwards thats not how oembed works. And also if you enter an short url from bit.ly for example there is no way to go from long to short url. Partially i agree with you, but it is impossible to implement.

  2. CKEditor 4.1 OEmbed fix

    The current version (4.0) of the OEmbed plugin is not compatible with CKEditor 4.1, thwors an error of Uncaught TypeError: Cannot read property 'isBlock' of undefined. The fix is really easy. In the ombed plugin directory find the plugin.js and change the following rows

    editorInstance.insertHtml(editor.config.oembed_WrapperClass != null ? '<div class="' + editor.config.oembed_WrapperClass + '" />' : '<div />'); editorInstance.insertHtml(e.code);

    to

    editorInstance.insertHtml(editor.config.oembed_Wrapper != null ? $('<div>').append($(editor.config.oembed_Wrapper).append(e.code)).html() : e.code);

    From now on instead of specifying a wrapper class like

    config.oembed_WrapperClass = 'embededContent';

    specify any wrapping tag with additional attributes and/or styles, like

    config.oembed_Wrapper = '<p style="text-align:center">';

    And that's all.

  3. How can I recall the plugin without the toolbar button???

    I have an external floating toolbar!

    function oembed() {
        // Get the editor instance that we want to interact with.
        var editor = CKEDITOR.instances.editor1;
        var url = 'http://www.youtube.com/watch?v=AQmbsmT12SE'
        var wrapperHtml = jQuery('<div />').append(editor.config.oembed_WrapperClass != null ? '<div class="' + editor.config.oembed_WrapperClass + '" />' : '<div />');
        
        // Check the active editing mode.
        if ( editor.mode == 'wysiwyg' )
        {
            // Insert HTML code.
            // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
            editor.embedCode(url, editor, false, wrapperHtml, 650, 400, false);
        }
        else
            alert( 'You must be in WYSIWYG mode!' );
    }

     

    • I added a new command for it in 1.09 you can now directly embed code

      CKEDITOR.on('instanceReady', function (event) {event.editor.oEmbed("url");
      });

      • Thank you so much Ingo. Can you be more precise for the command?

        If I want to embed an HTML snippet I use this function:

        function InsertText() {
                var editor = CKEDITOR.currentInstance;
                var value = document.getElementById( 'loremipsum' ).value;
                editor.insertHtml( value ); 
                }

        What's the function to embed a youtube url with your plugin in the new version?

        And how can I define the embed mode? Thank you, I appreciate it.

         

         

         

        • i posted the function above

          CKEDITOR.on('instanceReady', function (event) {

          event.editor.oEmbed("url");

          // you can also parse the width and height

           event.editor.oEmbed(url, maxWidth, maxHeight, responsiveResize); 


          });

          • Thank you so much! I've done it, but I still have the aspect ratio issue with inline editor. 

            I create a sample for you:

            http://media.dday.it/roby/editor4/samples/inlineall.html

            The three column under the slider are editable.

            You can try to enter a media url in the textarea, select a column, go with the cursor in the insertion point and push "insert media". As you can see avery wideo, also the ones with 16:9 aspect ratio are not responsive and the result is a 4:3 placeholder, but for my project i need that in wysiwyg mode the placeholder has the same exactly size of the real output, because i work with a lot of columns!

             

             

  4. 1 2 3 4 5 6 > >>