YouTube CKEditor Plugin

plugin.js

( function(){

  CKEDITOR.plugins.add( 'youtube', {
		requires : [ 'dialog' ],
	    icons: 'youtube',
	    init: function( editor ) {
	        editor.addCommand( 'youtubeDialog', new CKEDITOR.dialogCommand( 'youtubeDialog' ) );

	        editor.ui.addButton( 'YouTube', {
			    label: 'Insert YouTube video',
			    command: 'youtubeDialog',
			    icon: this.path + 'icons/youtube.png'
			});

			CKEDITOR.dialog.add( 'youtubeDialog', this.path + 'dialogs/youtube.js' );
	    }
	});

})();

script.js

// This script will convert links to a youtube video with the class "yt" into an embedded video, with a poster.

var video = $('a.yt');

video.each(function () {

	var v = $(this),
		id = v.attr('href').match(/=(.+)$/);

		// JS Prefix to know that this only works with JS enabled.
		v.empty().wrap('<div class=\'js-video\' />');
	
		// For play button icon
		v.append($('<span class=\'pbtn\'></span>')); 
	
		/* Example of using a lightbox script. You could also have the video play in place by replacing the image
		   with an iframe
	    */
		v.prettyPhoto({
			wmode: 'transparent',
			default_width: 720,
			default_height: 540,
			social_tools: ''
		});
	
		// Poster
		v.append($('<img />').attr({
			src: 'http://i.ytimg.com/vi/' + id[1] + '/0.jpg'
		})).on('click', function (e) {

		e.preventDefault();

	});

});

YouTube CKEditor Plugin

ckeditor
-plugins
--youtube
---dialogs
----youtube.js
---icons
----youtube.png
---plugin.js

youtube.js

CKEDITOR.dialog.add( 'youtubeDialog', function( editor ) {
    return {
        title: 'YouTube Properties',
        minWidth: 400,
        minHeight: 200,
        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'videoid',
                        label: 'YouTube Video ID',
                        validate: CKEDITOR.dialog.validate.notEmpty( "ID field cannot be empty" )
                    },
                    {
                        type: 'text',
                        id: 'title',
                        label: 'Display Title',
                        validate: CKEDITOR.dialog.validate.notEmpty( "Title field cannot be empty" )
                    }
                ]
            }
        ],
        onOk: function() {
            var dialog = this;

            var youtube = "<p><a href='http://www.youtube.com/watch?v=" + dialog.getValueOf( "tab-basic", "videoid" ) + "' title='" + dialog.getValueOf( "tab-basic", "title" ) + "' class='yt' target='_blank'> Watch \"" + dialog.getValueOf( "tab-basic", "title" ) + "\" on YouTube</a></p>";

            editor.insertHtml( youtube );
        }
    };
});