Video Plugin for CKEditor

Introduction

This is a plugin to create HTML5 <video> elements in CKEditor.

Author:

Alfonso Martínez de Lizarrondo

Version history:

1.0: 19-January-2011. First version.
1.1: 21-January-2011. Several bug fixes. Detect poster image dimensions. Complete localization.
1.2: 24-January-2011. Better dialog layout, specific filebrowserVideoBrowseUrl entry.

Check for latest version and other CKEditor plugins

Installation

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this

ckeditor\
	...
	images\
	lang\
	plugins\
		...
		video\
			plugin.js
			dialogs\
				video.js
			docs\
				install.html
			images\
				icon.png
				placeholder.png
		...
	skins\
	themes\

2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file: config.extraPlugins='video';

3. Add it to your toolbar

In your toolbar configuration, add a new 'Video' item in the place where you want the button to show up.

4. Configure server browser for video

You can use the config.filebrowserVideoBrowseUrl entry to specify a url so the file browser shows just video elements (as long as your configure properly your file browser).

5. Use it

Now empty the cache of your browser and reload the editor, the new button should show up and you can add <video> elements into the content. Here's a short video of the plugin in action.

Final notes

This plugin has been coded for CKEditor 3.5. It might be possible to backport it for older versions, but I don't think that it's worth the effort as sooner or later those installs will (or should) be upgraded to the current version.

Please, note that only newer browsers support the Video element, in older ones a simple text linking to the source videos is provided, you might want to use some javascript or css to customize the final behavior of these elements.