I found the following plugin for ckeditor that allows you to Embed YouTube, Vimeo, etc.

http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-cke...

The install instructions are simple, but I can't get it working.

1. Copy the "mediaembed" folder and place it in the ~/ckeditor/plugins directory.
2. Enable the plugin by changing or adding the extraPlugins line in your configuration (config.js): config.extraPlugins = 'MediaEmbed';
3. Add the button to your toolbar by adding the 'MediaEmbed' item to the list.

I follow the instructions and on step 3 I edit ckeditor.config.js, adding 'MediaEmbed' to the list. However the button never shows up in ckeditor. What do you all make of this ?

CommentFileSizeAuthor
#16 mediaembed.tgz498 bytesnoomz
#15 mediaembed.tgz498 bytesnoomz
#3 mediaembed.zip1.39 KBmephir
#2 mediaembed.tar_.gz1.2 KBmephir
#1 ckeditor-655938.patch1.89 KBmephir
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mephir’s picture

mephir CreditAttribution: mephir commented
FileSize
ckeditor-655938.patch1.89 KB

Unpack it to ckeditor/plugins module directory, near drupalbreaks. Apply this patch attached here. After that you should properly configure Input Formats. Drupal Filtered will be cutting off embed elements.

mephir’s picture

mephir CreditAttribution: mephir commented
FileSize
mediaembed.tar_.gz1.2 KB

Here is corrected mediaembed plugin, without iframe in dialog.

mephir’s picture

mephir CreditAttribution: mephir commented
FileSize
mediaembed.zip1.39 KB

Version with zip compression

wwalc’s picture

wwalc CreditAttribution: wwalc commented
Status: Active » Fixed

This plugin is now available in the CKEditor module. Please download the 6.x-1.x-dev release, once you'll see that it has been created on 10th December (or later), and check README.txt for instructions. Let me know if you had any problems with installation.

bryancasler’s picture

bryancasler CreditAttribution: bryancasler commented

Worked great, no problems from getting it to work, however.... now a new problem with the actual plugin has arised.

If I enter the following code in the plugin...

<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/LfhTPaqKEAE&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/LfhTPaqKEAE&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

The plugin formats it to...

<div class="media_embed">
	<object height="340" width="560"><param name="movie" value="http://www.youtube.com/v/LfhTPaqKEAE&amp;hl=en_US&amp;fs=1&amp;" /></object><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed allowfullscreen="true" allowscriptaccess="always" height="340" src="http://www.youtube.com/v/LfhTPaqKEAE&amp;hl=en_US&amp;fs=1&amp;" type="application/x-shockwave-flash" width="560"></embed></div>

Now the youtube flash object successfully shows up in the editor.

The Problem
If I select the youtube flash object in the editor and delete it, then the editor "appears" to be empty. However if I save/preview the node the youtube video will still show up. Going back into the "empty" editor and clicking "Source" reveals that the following youtube embed code still remains inside the editor.

<div class="media_embed">
	<object height="340" width="560"><param name="movie" value="http://www.youtube.com/v/LfhTPaqKEAE&amp;hl=en_US&amp;fs=1&amp;" /></object><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /></div>

Not really sure what is going on here and would appreciate any feedback since this kind of defeats the point of WYSIWYG.

wwalc’s picture

wwalc CreditAttribution: wwalc commented
Status: Fixed » Active

Confirmed, this shouldn't work like that.

mephir’s picture

mephir CreditAttribution: mephir commented

Changes to media embed plugin was commited to cvs. Problem is solved, but it change some functionality, you couldn't resize embeded object, but it is temporary inconvenience.

bryancasler’s picture

bryancasler CreditAttribution: bryancasler commented

I can confirm that youtube videos can be embeded and 100% deleted now, also as mentioned in the editor you can resize the video, but it has no impact on the actual output.

mephir’s picture

mephir CreditAttribution: mephir commented
Status: Active » Fixed

Resize feature added, changes commited to cvs.

bryancasler’s picture

bryancasler CreditAttribution: bryancasler commented

I can confirm the re-size works as well.

wwalc’s picture

wwalc CreditAttribution: wwalc commented

@animelion - thanks for testing!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

compujohnny’s picture

compujohnny CreditAttribution: compujohnny commented

Here is a nice screencast on How to add Youtube, Vimeo or any other embed content to CKeditor

drewcjm’s picture

drewcjm CreditAttribution: drewcjm commented

This plugin quit working after updating to Firefox 3.6.10. It appears the plugin does not finish converting the code. All that displays after saving is "Flash Animation".

noomz’s picture

noomz CreditAttribution: noomz commented
Category: feature » support
FileSize
mediaembed.tgz498 bytes

Full module is attached.

noomz’s picture

noomz CreditAttribution: noomz commented
FileSize
mediaembed.tgz498 bytes

Fail upload, second try.

mkesicki’s picture

mkesicki CreditAttribution: mkesicki commented
Status: Closed (fixed) » Needs review
subhojitmukherjee’s picture

subhojitmukherjee CreditAttribution: subhojitmukherjee commented

How can i implement it on CKEditor with WYSIWYG editor?

mkesicki’s picture

mkesicki CreditAttribution: mkesicki commented

@subhojitmukherjee,
did you mean WYSIWYG module for drupal ?

fureigh’s picture

fureigh CreditAttribution: fureigh commented

If you're trying to integrate the mediaembed plugin with a CKEditor setup of WYSIWYG module, try http://drupal.org/project/wysiwyg_mediaembed.

das-peter’s picture

das-peter CreditAttribution: das-peter commented

Please have a look at #1504696: Integration with CKEditor module
The provided patch should be allow to insert whatever file type is dealt with and the output will be defined by the file display settings of the media module.

KarthicK SrinivasaN’s picture

KarthicK SrinivasaN CreditAttribution: KarthicK SrinivasaN as a volunteer and commented
Issue summary: View changes

WYSIWYG editor works fine, but I need exclusive icons that supports only YOU-TUBE and VIMEO videos that has to be embed them in the content as an iframe.
Am currently using
CKEditor 3.6.5.7647 library and wysiwyg 7.x-2.2 module.