YouTube Video Gallery in SharePoint 2010

During one of our engagement we had a requirement for one of our customers to build video galley on SharePoint

The video galleries are created based on SharePoint content type as backend storage and content Query web part mixed with JQuery features to represent the video/images as sliding objects, the following diagram shows the high level design of the solution



First you have to create the following content types as follows:

1. Video Album

Custom content type that inherit from folder content type with the following properties :

  • Video Album cover image

2. YouTube Video

Custom content type that inherit from list item content type

  • Youtube thumbnail URL
  • youTube Video URL




Assign the content type to SharePoint list, name it as video gallery


Now you can add video albums and youtube videos into the video gallery list




Now once the backend is setup and filled with videos and albums we need to setup the UI part using content query web part located in codePlex this web part supports paging and custom XSLT styles:


we used the JQuery sliding gallery called pikachoose to display the videos located in video gallery ,once a user clicks on specific album we open popup that display the videos located in video album as sliding objects ,video album name is passed in query string to filter the videos based on the clicked Album,we created a custom content query web part to reference the needed script files ,CSS and XSLT and the most important to filter based on the passed query string , we inherited the normal content query as follows:

public class CustomCQWP : Microsoft.SharePoint.Publishing.WebControls.ContentByQueryWebPart


Then added the needed properties as follows,here am listing two of them



        [WebDisplayName("Custom CAML")]



        public string CustomQueryString { get; set; }





        [WebDisplayName("Parameter Name")]



        public string ParameterName { get; set; }

Then add the properties using

public override ToolPart[] GetToolParts()


ArrayList res = new ArrayList(base.GetToolParts());

res.Insert(0, new CustomPropertyToolPart() { Title = "Custom" });

return (ToolPart[])res.ToArray(typeof(ToolPart));


Then in CreateChildControls we used the query string to filter the data from the list

if (string.IsNullOrEmpty(ParameterName) == false){

string value = HttpContext.Current.Request.QueryString[ParameterName];

if (SPContext.Current.FormContext.FormMode == SPControlMode.Display)


Properties shown as follows in web part properties



We registered the CSS links and JS links as follows:

HtmlHead head = (HtmlHead)Page.Header;

HtmlLink link = new HtmlLink();

link.Attributes.Add("href", Page.ResolveClientUrl(CSSPath));

link.Attributes.Add("type", "text/css");

link.Attributes.Add("rel", "stylesheet");


if (string.IsNullOrEmpty(JavaScriptPath) == false)

Page.ClientScript.RegisterStartupScript(this.GetType(), "CustomCQWPJS", @"");

Now the gallery retrieves the objects from the backend list and display for users as gallery


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.