jQuery plugin Custom YouTube Channel Embed

• Tweet

• Tweet

Hi Guys,

I did this just for getting some hands on Youtube API. I thought its really impressive. But I also wanted to do something that do not need to authentication, thus I limited my Plugin to publicly available feeds.

You can get YouTube JSON documentation from here

https://developers.google.com/youtube/2.0/developers_guide_json

Alright lets get back to this plugin.

Motive of this plugin is to get list of videos from a custom channel and embed them in your web page. This plugin do not use swfObject but rather rely on current YouTube embed code that uses IFrame and Object embed.

Say you’ve got this Markup

<div id="myvideos"></div>

and you want to display your videos inside the above container, with this plugin this is how you do it

$("#entry").jcorgYoutubeUserChannel({mode:'thumbnails'});

Videos will be shown as thumbnails as shown below

I will give you links to demo in a bit. Lets check the plugin code first

The Plugin Code

/**
 * jquery.jcorgYoutubeUserChannel.js
 * Copyright (c) 2012 Jaspreet Chahal (http://jaspreetchahal.org/)
 * Licensed under the Free BSD License 
 * @author Jaspret Chahal
 * @projectDescription jQuery plugin to allow custom youtube channel embed
 * @documentation http://jaspreetchahal.org/jquery-plugin-youtube-channel-embed
 * @version 1.1
 * @requires jquery.js (tested with v 1.7.2)
 * NOT AFFILIATED WITH YOUTUBE
 * YOU MUST KEEP THIS COMMENT SECTION WHEN USING THIS PLUGIN AND A LINK BACK WILL BE APPRECIATED
 */
(function($) {      
      jQuery.fn.jcorgYoutubeUserChannel = function(settings) {
        settings = jQuery.extend({
          mode:'thumbnails', // list || thumbnails
          videoWidth:'640',
          thumbnailWidth:'240',
          videoWidth:'640',
          showTitle:true,
          maxResults:6,
          startIndex:1,
          autoPlay:false, 
          orderBy:'published', // relevance | published | viewCount | rating
          filterKeyword:'', // just in case you want to filter videos by keyword in a channel being embedded
          channelUserName:'jassiechahal',
          onlyHD:false,
          allowFullScreen:true,
          format:'embed', // embed | mobileH263 | mobileMP4
          useIncl:'frame' // object || frame
        },settings);
        var allowfullscreen = settings.allowfullscreen?'allowfullscreen':'';
        var url = 'http://gdata.youtube.com/feeds/users/';
        var autoplay = settings.autoPlay?'1':0;
        var youtubeParams = [
                              "alt=json",
                              "start-index="+settings.startIndex,
                              "max-results="+settings.maxResults,
                              "orderby="+settings.orderBy
                            ];
        if(settings.format == 'embed') 
            youtubeParams.push("format=5");        
        else if(settings.format == 'mobileH263') 
            youtubeParams.push("format=1");        
        else if(settings.format == 'mobileMP4') 
            youtubeParams.push("format=3");
        if(settings.filterKeyword.length > 0)
            youtubeParams.push("q="+filterKeyword);
        // HD
        if(settings.onlyHD) 
            youtubeParams.push("hd=true"); 
        // JSONP callback  
        youtubeParams.push("callback=?")       
        url = url + settings.channelUserName +"/uploads?" + youtubeParams.join('&');
        parentElement = jQuery(this);  
        autoplay = false;
        return this.each(function(){
            jQuery.getJSON(url,function(data) {
              if(settings.mode == "list") {
                var listObj = jQuery('<ul />',{class:"jcorg-yt-list"}).appendTo(parentElement); 
                if(data.feed.entry != undefined) {
                  for (var i = 0; i < data.feed.entry.length; i++) {
                       var entry = data.feed.entry[i];
                       var vidID= (entry ? entry.id.$t : '');
                       var vidCategory= (entry ? entry.media$group.media$category[0].label : '');
                       var vidLink=    (entry ? entry.media$group.media$player[0].url : '');
                       var vidTitle=    (entry ? entry.media$group.media$title.$t : '');
                       var vidThumb=    (entry ? entry.media$group.media$thumbnail[1].url : '');
                       var vidDuration= (entry ? entry.media$group.yt$duration.seconds : 0);
                       var vidViews=    (entry && entry.yt$statistics ? entry.yt$statistics.viewCount : 0);
 
                       if(settings.showTitle)
                        jQuery("<li/>",{class:"jcorg-yt-list-title"}).html(vidTitle).appendTo(listObj);                       
 
                       if(settings.useIncl == 'frame') {
                          if ( vidID.substr(0,38) == 'http://gdata.youtube.com/feeds/videos/' ) vidLink = 'http://www.youtube.com/embed/' + vidID.substr(38); 
                          var allowfullscreen = (settings.allowFullScreen)?'allowfullscreen':''; 
                          ytObject = '<iframe width="'+settings.videoWidth+'" height="'+(parseInt(settings.videoWidth/1.78))+'" src="'+vidLink+'?feature=player_detailpage" autoplay="'+autoplay+'" frameborder="0" '+allowfullscreen+'></iframe>';
                       }
                       else {
                              if ( vidLink.substr(0,31) == 'http://www.youtube.com/watch?v=' ) vidLink = 'http://www.youtube.com/v/' + vidLink.substr(31);  
                              var allowfullscreen = (settings.allowFullScreen)?'true':'false'; 
                              var ytObject = '<object width="'+settings.videoWidth+'" height="'+(parseInt(settings.videoWidth/1.78))+'">' +    
                                    '<param name="movie" value="'+vidLink+'?hl=en&fs=1&autoplay='+autoplay+'"></param>' +   
                                    '<param name="allowFullScreen" value="'+allowfullscreen+'"></param>' +   
                                    '<param name="allowscriptaccess" value="always"></param>' +   
                                    '<embed src="'+vidLink+'?hl=en&fs=1&autoplay='+autoplay+'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="'+allowfullscreen+'" width="'+settings.videoWidth+'" height="'+(parseInt(settings.videoWidth/1.78))+'"></embed>' + 
                                    '</object>';
                       }             
                       jQuery("<li/>",{class:"jcorg-yt-list-video"}).html(ytObject).appendTo(listObj);                   
                    };
                }
              }
              else if(settings.mode == "thumbnails") {
                var listObj = jQuery('<div />',{class:"jcorg-yt-default-play"}).appendTo(parentElement); 
                var listObj = jQuery('<ul />',{class:"jcorg-yt-thumbnails clearfix"}).appendTo(parentElement); 
                var vidArray = [];
                if(data.feed.entry != undefined) {
                  for (var i = 0; i < data.feed.entry.length; i++) {
                       var entry = data.feed.entry[i];
 
                       vidID= (entry ? entry.id.$t : '');
                       vidCategory= (entry ? entry.media$group.media$category[0].label : '');
                       vidLink=    (entry ? entry.media$group.media$player[0].url : '');
                       vidTitle=    (entry ? entry.media$group.media$title.$t : '');
                       vidThumb=    (entry ? entry.media$group.media$thumbnail[1].url : '');
                       vidDuration= (entry ? entry.media$group.yt$duration.seconds : 0);
                       vidViews=    (entry && entry.yt$statistics ? entry.yt$statistics.viewCount : 0);
                       vid = '<a href="'+vidLink+'" rel="prettyPhoto
[gallery]
" title="'+vidTitle+'" class="jcorg-yt-thumbnail"><img src="'+vidThumb+'" alt="'+vidTitle+'" width="'+settings.thumbnailWidth+'" height="'+(parseInt(settings.thumbnailWidth/1.34))+'" /></a>';
                       if(settings.showTitle) {
                          vid = vid+'<div class="jcorg-yt-thumbnail-title" style="width:'+settings.thumbnailWidth+'px !important">'+vidTitle+'</div>';
                       }
                       jQuery("<li/>").html(vid).appendTo(listObj);
 
                  }
                  jQuery("a[rel^='prettyPhoto']").prettyPhoto({
                              social_tools:false,
                               autoplay:settings.autoPlay,
                               default_width:settings.videoWidth,
                               default_height:(parseInt(settings.videoWidth/1.78)),
                               show_title:false
                            });
                }
 
              }
            });
        });  
      }
 
})( jQuery );

The CSS

I have not done anything fancy with CSS styles and kept them to minimal. Its you to decide the look and feel but here is what I got for you.

ul.jcorg-yt-thumbnails,.jcorg-yt-list {
	list-style:none;
	clear:both;
	margin:0;
	padding:0;
}
ul.jcorg-yt-thumbnails li{
	float:left;
	line-height:150%;
	margin:10px;
}
.jcorg-yt-thumbnail img:hover{
    border:10px solid rgba(10,10,10,0.4);
	border-radius:10px;
	opacity:1;
}
.jcorg-yt-thumbnail img{
	border:10px solid rgba(100,100,100,0.5);
	border-radius:10px;	
	opacity:0.6;
}
.jcorg-yt-thumbnail-title {
	height:40px;
	font-family:Calibri,arial;
	font-size:16px;
	text-align:center;
}
/*channel embedd list style */
 
.jcorg-yt-list-title {
	font-family:Calibri,arial;
	font-size:28px;
	line-height:200%;
}

The Options

• mode: You can choose whether to list videos with full preview or just show tumbnails
  list | thumbnails, Default: list
• videoWidth: Default video width
• thumbnailWidth efault thumbnail width, height is calculated automatically so you don’t have to maintain aspect ratio
• showTitle: If you want to show title value must be true else false
  true | false , Default: true
• maxResults: Number of videos you want to show
  Default: 6
• startIndex: Say you have 10 video and want to display last 5 when sort by viewCount, then you will have startIndex value set to 6
  Default: 1
• autoPlay: true | false – if you want to autoplay videos whenever possible
• orderBy: you can sort your videos by  relevance | published | viewCount | rating
• filterKeyword:”,  just in case you want to filter videos by keyword in a channel being embedded
• channelUserName: this is the user name whose channel you are embedding.
  Default: jassiechahal
• onlyHD:true | false – only include HD videos
• allowFullScreen:true | false If you want to allow video to go full screen or not
• format:Generally you will use value embed.  mobileH263 and mobileMP4 are there to use. format Map. embed:5  mobileH263:1 mobileMP4:3, Read more here 
  https://developers.google.com/youtube/2.0/reference#formatsp
• useIncl:’frame’ // object || frame
  Whether you want to use IFrame or Object embed

Download it or Fork it

You can get the full source from Git. That include require prettyPhoto library too. Link is below

https://github.com/jaschahal/jcorgYoutubeUserChannelEmbed

Demo

Here are couple of example for this plugin. Videos are from my own channel

List Example

Thumbnail Example

Donations

Well I know that absolutely NO ONE cares its always worth asking just if you changed your mind this time around. There are so many improvements that can be made to this plugin and your contribution will help fund my time for future updates and features.

Advertisement

Credits

This plugin use prettyPhoto for one of its modes. My persoanl thanks to creator of prettyPhoto, this plugin has made it easier on what I wanted to achieve.

Bug Report

Absolutely no abuse will be tolerated. Yeah I’ve been abused before before I touched feeling of an Acronis Fanboy. Anyway just leave your comment and let me know how whats wrong, we will work together on the issue. Please prefix BUG in your message.

I hope this helps.

Cheers!