Plugin for YouTube and another Streaming sites?

37 views
Skip to first unread message

MasterChief

unread,
Sep 16, 2010, 5:44:44 AM9/16/10
to cleditor
Hi. Have anyone written a plugin for streaming sites like youtube?
What is the best way to add or delete for this?
I have insert in demo the embed(object) html text, but see only a
link. It is possible to add the video with preview in cleditor?

Chris Landowski

unread,
Sep 16, 2010, 10:47:44 AM9/16/10
to cled...@googlegroups.com
Hi MasterChief,

I believe the reason you are seeing a link instead of the actual youtube
video is because browsers only show links when in design mode. You might
want to try disabling the editor (using the .disable(true) method, as this
will turn off design mode and should actually load the video. If disabling
the editor allows you to preview the video, I could easily add a preview
toolbar button the would toggle between .disable(true) and .disable(false).

Once you have all the problems ironed out, perhaps you might like to share
this plugin with the rest of the community? I would be glad to put it up on
the web site.

Let me know if disabling the editor allows you to preview the video,
Chris

MasterChief

unread,
Sep 25, 2010, 6:40:08 PM9/25/10
to cleditor
Hello Chris,

Thanks for your note, unfortunately, this have not an effect with this
HTML-code in HTML-mode.

<object width="480" height="385"><param name="movie" value="http://
www.youtube.com/v/5-XEa2zVjAg?fs=1&amp;hl=de_DE&amp;rel=0"></param><param
name="allowFullScreen" value="true"></param><param
name="allowscriptaccess" value="always"></param><embed src="http://
www.youtube.com/v/5-XEa2zVjAg?fs=1&amp;hl=de_DE&amp;rel=0"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="480" height="385"></embed></object>


YouTube have a new way to embed a video with an iframe:

<iframe class="youtube-player" type="text/html" width="480"
height="385" src="http://www.youtube.com/embed/5-XEa2zVjAg"
frameborder="0"></iframe>

With this I see only a black rectangle without the typical screenshot
und play-symbol.

What can I do?

I have use this code to set cleditor:

$('#preview').toggle(function() {
$('#message').cleditor()[0].disable(true);
}, function() {
$('#message').cleditor()[0].disable(false);
});

Chris Landowski

unread,
Sep 26, 2010, 11:35:35 AM9/26/10
to cled...@googlegroups.com
Hello MasterChief,

I spent a couple hours debugging this issue, which basically consisted of
switching into HTML mode, pasting in the YouTube <iframe> sample you
provided, and switching back into design mode. Firefox appears to be the
only browser that has a problem with the iframe content. IE, Chrome, Safari
and Opera work as expected.

After some additional debugging, I believe I have come up with a solution to
the problem. Within your plugin, just after you have run the
execCommand("inserthtml", ...) method to insert the YouTube iframe element,
add the following code:

// Check for firefox
if ($.browser.mozilla) {

// Recreate the iframe in a disabled state
editor.disabled = true;
editor.refresh();

// Wait for the YouTube iframe to finish loading
$(editor.$frame[0].contentWindow).load(function() {

// Enable the editor
editor.disable(false);

});

}

It appears that Firefox will not allow dynamic loading of content while it
is in designMode. The above code basically turns off designMode, loads the
content, then turns designMode back on.

Hope this helps,
Chris

-----Original Message-----
From: cled...@googlegroups.com [mailto:cled...@googlegroups.com] On Behalf
Of MasterChief

MasterChief

unread,
Sep 26, 2010, 7:09:55 PM9/26/10
to cleditor
Wow! Yes your code working with youtube-iframe with firefox fine.
Great work!

Is this possible with <object> for youtube too? I think iframes is a
security problem for many.

Chris Landowski

unread,
Sep 27, 2010, 9:24:12 AM9/27/10
to cled...@googlegroups.com
I am not sure if the will work with an object tag or not, but I cannot see
why it wouldn't. Anyway, if your users are having security problems with
iframes, then they would not be able to use CLEditor (or most other
editors), since they all use iframes.

-----Original Message-----
From: cled...@googlegroups.com [mailto:cled...@googlegroups.com] On Behalf
Of MasterChief
Sent: Sunday, September 26, 2010 6:10 PM
To: cleditor
Subject: Re: Plugin for YouTube and another Streaming sites?

MasterChief

unread,
Sep 28, 2010, 5:57:14 AM9/28/10
to cleditor
I have not expressed myself correctly.
Problems were only with iframes when those in textarea.val () has.
Insert in HTML-Mode of editor.

<textarea>
<iframe type="text/html" width="1"
height="1" src="http://www.domain.tld/killscript.js"
frameborder="0"></iframe></textarea>

For example, a malicious user to inject malicious code.
He put the iframe in HTML-Editor-Mode and save it, now is display on
page and every visitor load the killscript.js.

To prevent this (and another security holes), I use HTMLpurifier to
clean the textarea.val() in $_POST.
Here I will look to allow it with HTMLpurifier rules.

Chris Landowski

unread,
Sep 28, 2010, 9:43:10 AM9/28/10
to cled...@googlegroups.com
I understand. I could see where that could be a security risk.

I would assume that the solution I presented would work with the object tag
as well, since it is simply waiting for the contents of CLEditors iframe to
finish loading and not the YouTube iframe. Let me know if this works.

Chris

-----Original Message-----
From: cled...@googlegroups.com [mailto:cled...@googlegroups.com] On Behalf
Of MasterChief
Sent: Tuesday, September 28, 2010 4:57 AM
To: cleditor
Subject: Re: Plugin for YouTube and another Streaming sites?

Reply all
Reply to author
Forward
0 new messages