FakeImage Problem with Plugins

Hi, i've created the following plugin. The youtube.html page simply contains a textbox with an id "url" which allows you to enter the url to a YouTube video and it will add some markup inside the editor. When you click "OK" it inserts the code correctly and renders the image fine but when you switch to source code and back to the wysiwyg view the image disappears. I've been looking at the existing plugins such as the page break and flash ones which does something similar but nothing seems to work.

Appreciate it if someone could help. Thanks

(function() {
    CKEDITOR.plugins.add('youtube', {
        requires : ['iframedialog', 'fakeobjects'],
        init : function(editor) {
            var iframeWindow = null;
            var me = this;
            CKEDITOR.dialog.add('youtube_dialog', function() {
                return {
                    title : 'YouTube Movie Properties',
                    minWidth : 550,
                    minHeight : 200,
                    contents : [{
                        id : 'iframe',
                        label : 'Insert YouTube Movie',
                        expand : true,
                        elements : [{
                            type : 'iframe',
                            src : me.path + 'dialogs/youtube.html',
                            width : '100%',
                            height : '100%',
                            onContentLoad : function() {
                                iframeWindow = document.getElementById(this._.frameId).contentWindow;
                            }
                        }]
                    }],
                    onOk : function() {
                        this._.editor.insertHtml('<cke:youtube url="' + iframeWindow.document.getElementById('url').value + '">YouTube Video Place Marker</cke:youtube>');
                    }
                };
            });
            editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube_dialog'));
            editor.ui.addButton('YouTube', {
                label : 'Insert YouTube Movie',
                command : 'youtube',
                icon : this.path + 'images/icon.gif'
            });
            editor.addCss('img.cke_youtube {' +
                'width: 80px;' +
                'height: 80px;' +
                'background: url(' + CKEDITOR.getUrl(this.path + 'images/placeholder.png') + ') no-repeat center center;' +
                'border: solid 1px #A9A9A9;' +
            '}');
        },
        afterInit : function(editor) {
            var dataProcessor = editor.dataProcessor,
                dataFilter = dataProcessor && dataProcessor.dataFilter;
                
            if (dataFilter) {
                dataFilter.addRules({
                    elements : {
                        'cke:youtube' : function(element) {
                            return editor.createFakeParserElement(element, 'cke_youtube', 'youtube');
                        }
                    }
                }, 5);
            }
        }
    });
})();