Youtube plugin

[Dudelisius]

Hi

I created a youtube plugin with the following features:

- Embedd a youtube video in two sizes
- Create a textlink to the video in four sizes (In my case this is
loaded in a fancybox with the appropriate width and height. If the
fancybox isn't a possibility the link will redirect to the video on
youtube, opening in a new window)
- Create a imagelink to the video in four sizes, where the image is a
shot from the given video (In my case this is loaded in a fancybox
with the appropriate width and height. If the fancybox isn't a
possibility the link will redirect to the video on youtube, opening in
a new window)
- Enter the complete url or the video id
- On setup additional fields for the different options are shown or
hidden

Any comments or improvements are really appreciated, I'm not that well
of a jquery star.

Here is a link for a online demo:
http://www.chaosbydesign.nl/cleditor/youtube/index.php

And here is the source code:

(function($) {

// Set smallest width and height as basic
height = '340';
width = '560';

$.cleditor.buttons.youtube = {
name: "youtube",
image: "youtube.gif",
title: "Add a youtube video",
command: "inserthtml",
buttonClick: youtube
};

function youtube(e, data)
{
$.fancybox(
'<h2>Add a youtube video</h2>' +
'<div id="errorEmptyUrl" class="error">' +
'Please fill in a youtube url' +
'</div>' +
'<div id="errorInvalidUrl" class="error">' +
'This is not a valid youtube url' +
'</div>' +
'<table border="0">' +
'<tr>' +
'<td>Add the youtube url:</td>' +
'<td><input name="videourl" type="text"></td>' +
'</tr>' +
'<tr>' +
'<td></td>' +
'<td><input type="radio" value="embed" name="setMode" checked>
Embed my video in the page' +
'<br/><input type="radio" value="link" name="setMode"> Create a
link to the video' +
'<br/><div id="displayOptionsLinkYoutube">' +
'<br/><input type="radio" value="image" name="setLink" checked>
Display image from the video' +
'<br/><input type="radio" value="text" name="setLink"> Display
text' +
'</div>' +
'<div id="displayOptionsLinkYoutubeText">' +
'Link text: <input name="linkUrlText" type="text">' +
'</div></td>' +
'</tr>' +
'<tr>' +
'<td>Choose a size:</td>' +
'<td><button class="youtubeSize youtubeSizeActive"
value="560/340">560x340</button>' +
'<button class="youtubeSize" value="640/385">640x385</button>' +
'<button class="embed disabled" disabled value="853/505">853x505</
button>' +
'<button class="embed disabled" disabled
value="1280/745">1280x745</button></td>' +
'</tr>' +
'<tr>' +
'<td></td>' +
'<td><input class="submit" type="submit" value="Add video"></td>'
+
'</tr>' +
'</table>',
{
'autoDimensions' : true,
'width' : 'auto',
'height' : 'auto',
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);

// Hide errors
$('#errorEmptyUrl').hide()
$('#errorInvalidUrl').hide()

// hide Options
$('#displayOptionsLinkYoutube').hide();
$('#displayOptionsLinkYoutubeText').hide();

// Functions for clicking a button [1] Change active state [2] Get
new values for width and height
$('button').click(function()
{
$('button').removeClass('youtubeSizeActive');
$(this).addClass('youtubeSizeActive');

if($(this).hasClass('youtubeSizeActive'))
{
var value = $(this).val();
var splitted = value.split("/");
height = splitted[1];
width = splitted[0];
}
});

// Expand more options
$('[name=setMode]').click(function()
{
var value = $("[name=setMode]:checked").val();
var valueOptions = $("[name=setLink]:checked").val();
if(value == 'link')
{
$('button').removeClass('disabled');
$('button').addClass('youtubeSize');
$('button').removeAttr('disabled');
$('#displayOptionsLinkYoutube').show();

if(valueOptions == 'text')
{
$('#displayOptionsLinkYoutubeText').show();
}

$('[name=setLink]').click(function()
{
var valueOptions = $("[name=setLink]:checked").val();
if(valueOptions == 'text')
{
$('#displayOptionsLinkYoutubeText').show();
}
else
{
$('#displayOptionsLinkYoutubeText').hide();
};
});
}
else
{
$('.embed').addClass('disabled');
$('.embed').removeClass('youtubeSize');

$('#displayOptionsLinkYoutube').hide();
$('#displayOptionsLinkYoutubeText').hide();

if($('button').hasClass('disabled'))
{
$('button:eq(2)').attr('disabled', true);
$('button:eq(3)').attr('disabled', true);
$('button').removeClass('youtubeSizeActive');
$('button').first().addClass('youtubeSizeActive');
height = '340';
width = '560';
};
};
});

// On submit check values and construct the proper url
$('[type=submit]').click(function()
{
var value = $("[name=setMode]:checked").val();
var valueOptions = $("[name=setLink]:checked").val();
var youtubeUrl = $('[name=videourl]').val();

if(youtubeUrl.length)
{

checkUrl = new RegExp( /https?:\/\/(?:[a-zA_Z]{2,3}.)?(?:youtube
\.com\/watch\?)((?:[\w\d\-\_\=]+&amp;(?:amp;)?)*v(?:&lt;[A-Z]+&gt;)?
=([0-9a-zA-Z\-\_]+))/i);
if(checkUrl.test(youtubeUrl))
{
var youtubeUrl = $('[name=videourl]').val().match("[\\?
&]v=([^&#]*)");
var youtubeUrl = youtubeUrl[1];
}

if(value == 'link')
{
if(valueOptions == 'text')
{
var linkItem = $('[name=linkUrlText]').val();
}
else
{
var linkItem = '<img src="http://img.youtube.com/vi/' +
youtubeUrl + '/2.jpg" height="137px" width="200px">';
}

var html = '<a target="_blank" class="youtubeFancyboxLink"
href="http://www.youtube.com/watch?v=' + youtubeUrl +
'&feature=player_embedded&width=' + width + '&height=' + height + '">'
+ linkItem + '</a>';
}
else
{
// New embed code is worthless until we can set the wmode
properly
//var html = '<iframe title="YouTube video player" class="youtube-
player" type="text/html" width="' + width + '" height="' + height + '"
src="http://www.youtube.com/embed/' + youtubeUrl[1] + '?rel=0&amp;"
frameborder="0" wmode="transparant"></iframe>';
var html = '<object type="application/x-shockwave-flash"
style="width:' + width + 'px; height:' + height + 'px;" data="http://
www.youtube.com/v/' + youtubeUrl + '"><param name="wmode"
value="transparent" /><param name="movie" value="http://
www.youtube.com/v/' + youtubeUrl + '" /></object>';
}

data.editor.execCommand(data.command, html);
data.editor.focus();
window.top.window.$.fancybox.close();
}
else
{
$('#errorEmptyUrl').show();
}

});
return false;
};
})(jQuery);

[Flavio Duarte]

Hi

did you test with the last firefox version?

2010/10/13 Dudelisius <dudel...@gmail.com>

[Dudelisius]

Sorry only in chrome, going to test it right away...

On Oct 13, 3:38 pm, Flavio Duarte <flaviogabr...@gmail.com> wrote:
> Hi
> did you test with the last firefox version?
>

> 2010/10/13 Dudelisius <dudelis...@gmail.com>

> ...
>
> read more »

[Flavio Duarte]

look

http://groups.google.com/group/cleditor/browse_thread/thread/945f147e87ad3c4c/6254a5940f03e3c2

2010/10/13 Dudelisius <dudel...@gmail.com>

[Alexander Liljengård]

Worth noticing is that the inserthtml-command doesn't work in all browsers:

http://www.quirksmode.org/dom/execCommand.html

A better solution would be to get the range in manually add the html to the editor-content.

// Alex

2010/10/13 Flavio Duarte <flavio...@gmail.com>

[Chris Landowski]

I just tested it in Firefox 3.6.10, IE8, Chrome 6.0, Safari 4.0.4 and Opera
10.62 and could not get it working in any of these browsers.

[Dudelisius]

Chrome 6.04 - Works
Firefox 3.6.3 - The code is inserted but the embedded video isn't show
within the editor
IE 8 - Complete fuckup
Opera 10.63 - Works

Note: this script is still in progress, I'm here for tips,
improvements etc.

On Oct 13, 3:45 pm, Alexander Liljengård <alexan...@liljengard.se>
wrote:

> Worth noticing is that the inserthtml-command doesn't work in all browsers:
>
> http://www.quirksmode.org/dom/execCommand.html
>
> A better solution would be to get the range in manually add the html to the
> editor-content.
>
> // Alex
>

> 2010/10/13 Flavio Duarte <flaviogabr...@gmail.com>
>
>
>
> > look
>
> >http://groups.google.com/group/cleditor/browse_thread/thread/945f147e...
>
> > 2010/10/13 Dudelisius <dudelis...@gmail.com>

> ...
>
> read more »

[Dudelisius]

Safari 5.0.1 works here as

> ...
>
> read more »

[Chris Landowski]

I agree with Alex. CLEditor will substitute TextRange.pasteHTML for IE when it sees an execCommand(“insertHTML”, html) call but I have encountered several problems attempting to insert object and iframe elements using this method.

 

I would also recommend putting the prompt inside of a CLEditor popup which would eliminate the need for fancybox.

[Dudelisius]

Will be looking in the execCommand issue and the browser
compatibility...

On Oct 13, 3:57 pm, Chris Landowski <chrislandow...@gmail.com> wrote:
> I agree with Alex. CLEditor will substitute TextRange.pasteHTML for IE when
> it sees an execCommand(“insertHTML”, html) call but I have encountered
> several problems attempting to insert object and iframe elements using this
> method.
>
> I would also recommend putting the prompt inside of a CLEditor popup which
> would eliminate the need for fancybox.
>
> From: cled...@googlegroups.com [mailto:cled...@googlegroups.com] On Behalf
> Of Alexander Liljengård
> Sent: Wednesday, October 13, 2010 8:46 AM
> To: cled...@googlegroups.com
> Subject: Re: Youtube plugin
>
> Worth noticing is that the inserthtml-command doesn't work in all browsers:
>
> http://www.quirksmode.org/dom/execCommand.html
>
> A better solution would be to get the range in manually add the html to the
> editor-content.
>
> // Alex
>

> 2010/10/13 Flavio Duarte <flaviogabr...@gmail.com>
>
> look
>
> http://groups.google.com/group/cleditor/browse_thread/thread/945f147e...
> c/6254a5940f03e3c2
>
> 2010/10/13 Dudelisius <dudelis...@gmail.com>

> <url:%3c/td> </td>' +

> ...
>
> read more »

[Chris Landowski]

I did some pretty extensive testing on this issue last week and this is
something that FireFox 3.6.10 just started blocking. They must have decided
that it was some type of security risk, and it would not surprise me if
Chrome, Safari and Opera soon follow suit.

Rather than using the execCommand method to insert HTML, what needs to be
done here is to create and object or iframe element and manually insert it
into the DOM. The trick is figuring out exactly where to insert it. For all
W3C compliant browsers, this is fairly simple since the W3C range object
contains the parent node and an offset. IE on the other hand is a little
tougher. Getting the parentElement is easy enough, but IE does not supply
the offset on its TextRange object. If anyone out there has a solution to
this problem, I would also be very interested in hearing about it also. I
know it's possible, I just have not had enough time to tinker with it.

After just putting out the latest release last night, I need a break for a
couple weeks before I start digging into something like this.

Hope this helps!

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

Of Dudelisius
Sent: Wednesday, October 13, 2010 9:11 AM
To: cleditor
Subject: Re: Youtube plugin