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

19 thoughts on “asp.net youtube player control

  1. 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.

  2. 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

      1. 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.

  3. 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 .?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s