I liked the little flickr snippet I wrote for embedding galleries from urls so much that I decided to write another flickr centric plugin for grabbing videos from urls. This is one of those features that hasn’t got that much traction but it is pretty neat. Both of these plugin are pretty good for generating media based on user input. For instance, if a user writes a comment and pastes the link to a flickr gallery or video you can scrape the comment for those links and generate the content in the comment. Or not. Use as you may! I don’t care

Note: You will need an flickr API key and secret to use this plugin. You can get an API key by logging into your Yahoo/flickr account and heading here: http://www.flickr.com/services/api/keys/. More information on the flickr API can be found here: http://www.flickr.com/services/api/

Optional Settings

• url (string Default: '')
  Is the flickr url of the video you’d like to display
• key (string Default: '')
  The API key , provided by flickr, to use with the API
• secret (string Default: '')
  The API secret, provided by flickr, to use with the API
• height (number in px Default: 400)
  Is height of the gallery
• width (number in px Default: 600)
  Is width of the gallery
• bgcolor (hex code Default: #000000)
  Is background color of the video player

Example

Code

/**
 * Flickr Video Plugin
 * @author Darcy Clarke
 *
 * Copyright (c) 2012 Darcy Clarke
 * Dual licensed under the MIT and GPL licenses.
 * http://darcyclarke.me/
 */

(function($){
    $.fn.flickrVideo = function(options){
        var settings = $.extend({
            url : '',
            height :  400,
            width : 600,
            bgcolor : '#000000',
            key : '',
            secret : ''
            }, options),
            id,
            method = 'flickr.photos.getInfo',
            format = 'json',
            collection = this;
        id = settings.url.match(/\/photos\/(.*)/)[1].split('/')[1];
        $.ajax({
            url: 'http://www.flickr.com/services/rest/?method='+method+'&format='+format+'&api_key='+settings.key,
            dataType: 'jsonp',
            data: {'photo_id':id},
            type: 'GET',
            jsonpCallback: 'jsonFlickrApi',
            success: function(data){
                if(data.photo.media === 'video'){
                    $(this).append('<object type="application/x-shockwave-flash" width="'+settings.width+'" height="'+settings.height+'" data="http://www.flickr.com/apps/video/stewart.swf?v=49235" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param name="flashvars" value="intl_lang=en-us&photo_secret='+data.photo.secret+'&photo_id='+id+'"><param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=49235"><param name="bgcolor" value="'+settings.bgcolor+'"><param name="allowFullScreen" value="true"><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/video/stewart.swf?v=49235" bgcolor="'+settings.bgcolor+'" allowfullscreen="true" flashvars="intl_lang=en-us&photo_secret='+data.photo.secret+'&photo_id='+id+'" height="'+settings.height+'" width="'+settings.width+'"></object>');
                }
            }
        });
        return collection;
    };
 })(jQuery);

​

Github: jQuery Flickr Video Plugin
Suggestions, problems, feedback?
Check Out the Repo