asp.net youtube player control

Recently in one of my project I need to show you tube videos in various places of my app.
So I decided to write a custom server control to do this functionality.
This is fairly simple to do it but it may be use full when you are using in multiple places or adding url’s from code behind.
So lets dive in to Visual Studio to create a new  C# Class library project and called DMI.Web.UI (you can use your own name).
So next step is to create a new class called YouTubePlayer.cs which is derive from System.Web.UI.Controls:

Click here to download the complete source code

using System;
using System.Web.UI.HtmlControls;

namespace Controls
{
public class YouTubePlayer : System.Web.UI.Control
{

}
}

Next is adding properties to the class (Properties of YouTube Player)

We want the user to set few properties for the YouTube Player from the aspx page

• URL (sets the you tube url)
• Height (sets the height of the player)
• Width (sets the width of the player)
• AllowFullScreen (allow full screen option)

Next would be  generate the you tube embed code in RenderControl Method

The RenderControl method will sends the html output stream to browser. In order to do that lets create a HtmlGenericControl instance to hold the youtube embed code and add set all properties to the player

public override void RenderControl(System.Web.UI.HtmlTextWriter writer)
{
System.Text.StringBuilder oBuilder = null;
if (!string.IsNullOrEmpty(URL))
{
oBuilder = new System.Text.StringBuilder();
oBuilder.Append(“<object width=\”” + Width + “\” height=\”” + Height + “\”><param name=\”movie\” value=\”” + URL + “\”>”);
oBuilder.Append(“</param><param name=\”allowFullScreen\” value=\”” + AllowFullScreen.ToString() + “\”></param><param name=\”allowscriptaccess\” value=\”always\”></param>”);
oBuilder.Append(“<embed src=\”” + URL + “\” type=\”application/x-shockwave-flash\” allowscriptaccess=\”always\””);
oBuilder.Append(“allowfullscreen=\”” + AllowFullScreen.ToString() + “\” width=\”” + Width + “\” height=\”” + Height + “\”></embed></object>”);
}
var oDiv = new HtmlGenericControl(“div”);
oDiv.Attributes.Add(“style”, “display:inline”);
oDiv.Attributes.Add(“id”, “divYouTube”);
oDiv.InnerHtml = oBuilder != null ? oBuilder.ToString() : “Youtube url is empty”;
oBuilder = null;
Controls.Add(oDiv);
base.RenderControl(writer);
}

So  done with creating custom server control after successfully building this you can add dll refference to your asp.net app
and use it in the aspx page

How to Use the control in the Page

Add a Register directive at the beginning of your web page:

<%@ Register Assembly=”DMI.Web.UI” Namespace=”Controls” TagPrefix=”dmi” %>

Place the control tag where ever you want

<dmi:YouTubePlayer Width=”500″  Height=”400″  URL=”http://www.youtube.com/v/WLCKGyms6vQ&hl=en_US&fs=1&&#8221;
ID=”youTube” runat=”server”  AllowFullScreen=”false”></dmi:YouTubePlayer>

You can set the properties in code behind too

protected void Page_Load(object sender, EventArgs e)
{
youTube.URL = “http://www.youtube.com/v/WLCKGyms6vQ&hl=en_US&fs=1&&#8221;;
youTube.Width = “600”;
youTube.Height = “400”;
}

The Complete Custom Server Control Code

using System;
using System.Web.UI.HtmlControls;

namespace Controls
{
public class YouTubePlayer : System.Web.UI.Control
{
private string width = “425”;

private string height = “344”;

private bool allowFullScreen = true;

public YouTubePlayer()
{

}

public String URL { get; set; }

public String Width
{
get
{
return this.width;
}
set
{
this.width = value;
}
}

public String Height
{
get
{
return this.height;
}
set
{
this.height = value;
}
}

public Boolean AllowFullScreen
{
get
{
return this.allowFullScreen;
}
set
{
this.allowFullScreen = value;
}
}

public override void RenderControl(System.Web.UI.HtmlTextWriter writer)
{
System.Text.StringBuilder oBuilder = null;
if (!string.IsNullOrEmpty(URL))
{
oBuilder = new System.Text.StringBuilder();
oBuilder.Append(“<object width=\”” + Width + “\” height=\”” + Height + “\”><param name=\”movie\” value=\”” + URL + “\”>”);
oBuilder.Append(“</param><param name=\”allowFullScreen\” value=\”” + AllowFullScreen.ToString() + “\”></param><param name=\”allowscriptaccess\” value=\”always\”></param>”);
oBuilder.Append(“<embed src=\”” + URL + “\” type=\”application/x-shockwave-flash\” allowscriptaccess=\”always\””);
oBuilder.Append(“allowfullscreen=\”” + AllowFullScreen.ToString() + “\” width=\”” + Width + “\” height=\”” + Height + “\”></embed></object>”);
}
var oDiv = new HtmlGenericControl(“div”);
oDiv.Attributes.Add(“style”, “display:inline”);
oDiv.Attributes.Add(“id”, “divYouTube”);
oDiv.InnerHtml = oBuilder != null ? oBuilder.ToString() : “Youtube url is empty”;
oBuilder = null;
Controls.Add(oDiv);
base.RenderControl(writer);
}
}
}

Click here to download the complete source code

Hope this may help you

Thanks
Deepu

Advertisements