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&”
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&”;
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
great article, i has to use it on my current project.
thanks.
nice article thank you, very useful.
good work, will save a lot of time
Excelent Work !!!
Hi there,
From a beginners point of view that was great. I learnt from the content in this article and found the way you laid it out and explained each of the stages to be very helpful.
Keep up the blogging.
useful control..
very nice..
10x, Gret work you done 🙂
You right
hi deep umi,
when i try to use this control to show it in repeater control with external video link other than provided by you not working ,,
does not show any thing.. why ??
Looking for solution
Can you please send me the code..so that I can take a look
try this.. code..
using System.Text.RegularExpressions;
public static string GetUrlParam(string url, string param)
{
string pattern = “(” + Regex.Escape(param) + “)=(.*?)(?:&|$)”;
return Regex.Match(url, pattern).Groups[2].Value;
}
//pass your you tube url to the above function some thing like below..
string youTubeUrl = “http://www.youtube.com/watch?v=FKsI9r8GjGQ&feature=featured”;
string videoId = GetUrlParam(youTubeUrl , “v”);
string emebedUrl =youTubeUrl.Replace(“watch?v=”,”v/”);
finally you will get the embed object code.. some thing like below..
hope this will resolve your issue.
hi deepu,
yr solution worked for me thanks for solutions
regards
Ramani Sandeep
Yeap this is a nice tips.
You can download the the source code from the below url.
http://www.4shared.com/file/245049884/654e5f28/Asp_Net_YouTubePlayer.htm
hi,
when i use your code it works well for only the given link .. not the external one .. then i tried your above provided code .. it works well … but in design view it creates problem as it displays more than one control .. whats the solution .?
Probably I would say Designer bug
Thanks
Deepu
Very useful.. Big help for me..
Thanks very much for this article , and after your permission i updated it to allow more URL formats
http://sayedaly.wordpress.com/2011/08/24/asp-net-youtube-user-control/
thatks……….. IT’s very usefull to me …Great jop keep it up!! 🙂