This is the code we're using, just to give a general idea. It's 1.1.x but running jQuery. The inline styles on the embed tags auto-resize the vids for any screen (you can watch them on a 240 wide phone if you're daft enough).
function getSettingsLink()
{
var storage = window.localStorage;
if (!storage) return null;
var tag = $('<span> (<a href="">Settings</a><span>Embedding: <select></select>\
</span>)</span>'), opts = [0,5,10,20,35,1000];
tag.find(">a").click(function _(e){
e.preventDefault();
var $t = $(this).text("").unbind("click", _);
if (!storage)
$t.after(' “Web Storage” is unsupported by your browser');
else
$t.next().show();
});
tag.find(">span").hide();
var sel = tag.find("select").change(function(){
storage.embed_nr = opts[$(this).find("option:selected")[0].value];
});
var nr = Number(storage.embed_nr || 5), opt = $.inArray(nr, opts);
$(['Only preview images','Max. 5/page','Max. 10','Max. 20','Max. 35','All'])
.each(function(i, e){sel.append('<option value="'+i+'"'+(i==opt?' selected="true"':"")+'>'+e+'</option>')});
tag.max = nr;
return tag;
}
(window.$ && $(function linkifyVideos() {
var domain_rx = /([\w-]+\.\w+)\/(.+)$/;
var embed_html = '<embed width="640px" height="385px" style="max-width: 98%; max-height: auto;" allowscriptaccess="never"\
allowfullscreen="true" quality="high" wmode="transparent" src="{src}"\
type="application/x-shockwave-flash"/>';
function getEmbed(s){return embed_html.replace('{src}',s)}
function showFlash(tag, eURL){$(tag).replaceWith(getEmbed(eURL))}
function getIMG(a, src, eURL, eURLa, sF)
{
sF = sF || showFlash;
return $('<a href="'+a.href+'" style="display: block; width: 480px; max-width: 98%; height: auto; max-height: auto;"><img alt="Preview image" '+
'title="Click to play or double-click to load." class="YouTube_vid" src="'+src+'"/></a>')
.dblclick(function(e) {
e.preventDefault();
clearTimeout(this.tID); // Prevent single click.
sF(this, eURL);
}).click(function(e) {
e.preventDefault();
t = this;
t.tID = setTimeout(function(){sF(t, eURLa)}, 200);
});
}
function embedOrIMG(emb, a, src, eURL, eURLa)
{ eURL='http://'+eURL; return emb ? getEmbed(eURL) : getIMG(a, 'http://'+src, eURL, 'http://'+eURLa); }
var handlers = {
'youtube.com' : function(path, a, emb) {
var vID = path.match(/\bv[=/]([^&#?$]+)/i) || path.match(/#p\/(?:a\/)?[uf]\/\d+\/([^?$]+)/i);
if (!vID || !(vID = vID[1])) return;
var embedURL = 'youtube.com/v/'+vID,
tag = embedOrIMG(emb, a, 'img.youtube.com/vi/'+vID+'/0.jpg',
embedURL, embedURL+'&autoplay=1');
return ['YouTube Video:', tag];
},
'google.com' : function(path, a, emb) {
var vID = path.match(/\bdocid=([^&#$]+)/i);
if (!vID || !(vID = vID[1])) return;
var embedURL = 'video.google.com/googleplayer.swf?fs=true&docid='+vID,
tag = embedOrIMG(emb, a, 'www.google.com/images/video_logo.png', //gvt0
embedURL, embedURL+'&autoplay=1');
return ['Google Video:', tag];
},
'vimeo.com' : function(path, a, emb) {
var vID = path.match(/^(\d+)/i);
if (!vID || !(vID = vID[1])) return;
var embedURL = 'vimeo.com/moogaloop.swf?clip_id='+vID,
tag = embedOrIMG(emb, a, 'assets.vimeo.com/images/logo_vimeo_land.png',
embedURL, embedURL+'&autoplay=1');
return ['Vimeo Video:', tag];
},
'soundcloud.com' : function(path, a, emb) {
if (!/\/+./.test(path)) return;
var embTag = '<embed height="81" type="application/x-shockwave-flash"\
width="100%" src="http://player.soundcloud.com/player.swf?url='+a.href+'"\
/>';
var tag = emb ? embTag : getIMG(a,
'http://soundcloud.com/images/soundcloud-logo-sc.png', '', '',
function(tag, url){$(tag).replaceWith(embTag)});
return ['SoundCloud:', tag];
}
};
//handlers['google.co.uk'] = handlers['google.com'];
var links = $('#quickModForm a'); // Get the links in the postings.
var settings = getSettingsLink() || $("");
var closebtn = $(' <a title="Close video">(X)</a>').click(function() {
$(this).next().next().remove(); });
var embed_nr = window.localStorage ? localStorage.embed_nr : 5;
for (var i=links.length-1; i > -1; i--)
{
var tag = links;
if ("quote;signature".indexOf(tag.parentNode.className) != -1)
continue; // Ignore in quotes.
var text = tag.innerText || tag.textContent || "";
if (tag.href == "" || tag.href.indexOf(text) != 0) // == -1
continue; // No href attr, or inner text not equal to href attr.
if ((m = tag.href.match(domain_rx)) && // Get domain.
(handler = handlers[m[1]]) && // Is there a handler for this domain?
(args = handler(m[2], tag, embed_nr > 0))) { // Call the handler.
--embed_nr;
$(tag).text(args[0]).before("<p></p>")
.after(settings.add(closebtn).clone(true), "<br/>", args[1], "<br/>");
}
}
}));
// End of code by Aziz