Adding Vimeo/Youtube iframe embed to CKeditor

Posted by Gregg on October 13, 2010 in boring code, Design |

I am in the middle of building a few apps that rely on a text editor and after much research I decided on using CKEditor, a beautiful, well supported WYSIWYG.

Within our organization we use video hosted on Vimeo to stream our media as it is both an awesome and cost effective service.

The rub is that the users of my apps would much rather have an easy way to embed their videos rather than embed using the available CKEditor embed function, as embed code can pretty scary to end users and using the new iframe embed method made video from Vimeo and Youtube available on iphone/ipad/etc.

So I reengineered the embed plugin to let an end user embed a Vimeo video to their content by only providing the Vimeo video’s id. By adding the vimeo plugin to the CKEditor config, and including Vimeo in your toolbar definition you now have a shiny vimeo button:

By clicking on the Vimeo icon the user receives the following dialog box:

After entering the id and OK the video is embedded in the content. Power users can then modify widths, and other settings.

Oh and as you may have noticed above I have done the same for ‘Youtube’ as well.
Just call on plugin youtube and use Youtube to get the shiny Youtube button and embed function.

They are a bit rough but at the moment they get the job done. Feed back is very much appreciated.
vimeo plugin (zip) | youtube plugin (zip)

Update:
You may have to first click on the editor window for the embed to work. as it needs to know where you want to place the video. I will look into adding a focus so this is not necessary.

As a side note if you are using the plugin on an https domain you may want to update the vimeo URL to “https://secure/vimeo.com/…” and YouTube to “https://youtube.com/…” to avoid scary errors in IE and missing content in the editor.

16 Comments on Adding Vimeo/Youtube iframe embed to CKeditor

By Gerard on October 15, 2010 at 3:02 am

Its a very good plugin! but not running in my ckeditor 3.4.1, it’s possible?
Displays the dialog box, but the embed code is not inserted

Thank you!

By Gregg on October 24, 2010 at 6:06 pm

I will take a look. I think I used that version when writing the plugins. Thanks for letting me know.

By Graham on October 28, 2010 at 11:35 am

Thanks Gregg, this looks amazing!

I’m having the same trouble as Gerard. Plugin loads, but the dialog “OK” will not submit.

I had the same trouble with the MediaEmbed plugin, which was fixed by adding “editor” to function () in plugin.js.

I checked for that and it seems to be there in your plugin.js… This is an issue that seems to happen when multiple editors are used. I’m not familiar enough with JS, but I’m sure it’s related…

Can you check your plugin.js to make sure the submit call is being put through to the right editor instance?

Stellar work, my friend!

By Gregg on October 28, 2010 at 12:24 pm

Sorry for the delay in troubleshooting this everyone been buried in a few projects.

By Gregg on October 28, 2010 at 4:26 pm

as noted above here is an update::

You may have to first click on the editor window for the embed to work. as it needs to know where you want to place the video. I will look into adding a focus so this is not necessary.

By Peter Bockenhauer on November 9, 2010 at 8:33 pm

Can’t seem to get the toolbar icon to display. Here’s my config.js:

config.plugins = ‘vimeo’;
config.toolbar = ‘Full’;

config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['BidiLtr', 'BidiRtl'],
‘/’,
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['vimeo','Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
‘/’,
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
];

By Gregg on November 9, 2010 at 8:42 pm

Hey Peter,
Use ‘Vimeo’ instead of ‘vimeo’

By Peter Bockenhauer on November 9, 2010 at 8:47 pm

Tried that. Still won’t display the icon.

By Damien on December 3, 2010 at 1:52 am

Thanks for your hard work on these Gregg.

They work beautifully on chrome. But nothing is inserted at all in Firefox (3.6.10). I’ll have a plodge around with some javascript and see if I can work out why.

By Damien on December 3, 2010 at 4:17 am

I’ve had a bit of a hack at this, and seem to have made it work for Firefox.

Send me an email for details (the short version is that this.getParentEditor().insertHtml(text) doesn’t work for gecko).

By CKEditor - 明日が見えない技術屋のブログ on December 18, 2010 at 7:50 am

[...] 参考 [...]

By Hugo on March 1, 2011 at 8:37 pm

Cool.

Can u add ‘?wmode=transparent’ end of the Youtube URL, it will be much better to fixing overlay problem.

By Gregg on March 31, 2011 at 8:54 am

will do. Thanks Hugo.

By rooter on July 30, 2011 at 6:20 pm

You are awesome.

Thank you so much.

By Fernando on August 24, 2011 at 7:31 am

thanks! very useful!

By miwa on August 25, 2011 at 7:54 am

thx, a lot great JoB greatings from Poland