YouTube™ API for ASP.NET

Download source code - 282 KB

DEMO: CLICK ON THE SAMPLE SCREENSHOT BELOW TO OPEN WebTV APP

Introduction

Embedded Video Players, based either on Adobe Flash™ or Microsoft Silverlight™ technology, could dramatically improve web page aesthetic appeal and overall user experience. This article demonstrates the coding technique for embedding the popular YouTube™ Video Player (which is built on the above mentioned Adobe Flash™) in ASP.NET web pages via an API written in C# and a Microsoft AJAX extension.

The project contains:

The default web page "Default.aspx" with the corresponding code-behind: both to be placed in the Application root directory (ASP.NET 2.0+).
Code module "YouTubeScriptGenerator.cs" to be placed in the App_Code directory.
AJAX library file (AjaxControlToolkit.dll) to be placed in the Bin directory

Another functional DEMO of the YouTube™ Player embedded in an ASP.NET web page, containing playlist and a set of navigation controls is available at: www.webinfocentral.com/resources/WebTV.aspx

Background

The Embedded Video Player would be capable of streaming (playing back) the audio/video content, available from the www.youtube.com website.

Note: You do not need to subscribe/logon to the site in order to utilize this feature.

The video item ID is encoded into a query string, looking like a random set of characters, for example: x_4CNvG1Q_M, with corresponding full address string: http://www.youtube.com/watch?v=x_4CNvG1Q_M (in particular sample presumably pointing to the video clip titled: “Anastasia Volochkova dancing to Adiemus by Karl Jenkins).

The easiest way to embed the YouTube™ Video Player is to go to the www.youtube.com website, select the item of interest, and then copy/paste the corresponding snippet, located in the text box marked “embed”, into your own web page, and Voila! YouTube™ site provides several customization options regarding the video player size (this includes standard settings specified as: 340x285, 445x364, 500x405, 660x525) and color palette selection.

The ASP.NET YouTube™ API described in this article provides a much wider set of customization features.

Using the Code

The practical steps to embed the YouTube™ Video Player into an ASP.NET Web Page are as follows:

Create or open an ASP.NET Web Site using either Microsoft Visual Studio 2008 (any edition) or the Visual Web Developer 2008 Express edition.
Download the compressed (.zip) file. Extract the components into your web application directory.
Set the embedded YouTube™ Video Player dimension: W/H.
Customize the YouTube™ Video Player border options.
Customize the YouTube™ Video Player startup settings:
- First item to play
- Autoplay mode
- Starting the Video/Audio streaming at a predefined time.

Following are the code snippets corresponding to the demo ASPX web page with the associated code-behind module:

<%@ Page Language="C#" 
    AutoEventWireup="true"  
    CodeFile="Default.aspx.cs" 
    Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register assembly="AjaxControlToolkit" 
   namespace="AjaxControlToolkit" 
   tagprefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>DEMO | YouTube API for ASP.NET</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" 
                    runat="server" updatemode="Conditional" >
            <ContentTemplate> 
            <div>
                <!-- ALL CONTENT IS SHOWN FOR DEMO PURPOSE ONLY-->
                <asp:DropDownList ID="cmbPlaylist" 
                           runat="server" AutoPostBack="True">
                    <asp:ListItem Value="XP9tzWtLFus">Anastasia 
                                  Volochkova(Adiemus)</asp:ListItem>
                    <asp:ListItem Value="raRaxt_KM9Q">Sound Of Silence 
                                 (Masters of Chant)</asp:ListItem>
                </asp:DropDownList>
                <br /><br />
                <asp:Literal ID="Literal1" runat="server"></asp:Literal>
            </div>
            </ContentTemplate>
          </asp:UpdatePanel>
          
          <hr />
          <h3>Sample Demo: Anastasia Volochkova, Russian prima ballerina 
                                   dancing "Adiemus"</h3>
          <h4>Initial settings: 640x480, autoplay=0</h4>
          <hr />
          <h4>
              More Demo available at: 
              <a href="http://www.webinfocentral.com/RESOURCES/VideoAudio.aspx" 
              target="_blank">www.webinfocentral.com</a>
          </h4>
          <hr />
        </form>
    </body>
</html>

The code-behind:

//****************************************************************************
// Module           :   Default.aspx.cs
// Description      :   YouTube API for ASP.NET: code behind
// Developer        :   Alexander Bell (Infosoft International Inc)
// DateCreated      :   09/10/2009
// LastModified     :   09/12/2009
//****************************************************************************
// DISCLAIMER: This Application is provide on AS IS basis without any warranty
//****************************************************************************
//****************************************************************************
// TERMS OF USE     :   ALL YouTube CONTENT IS SHOWN AS DEMO SAMPLE ONLY
//                  :   You can use it at your sole risk
//****************************************************************************
using System;
public partial class _Default : System.Web.UI.Page 
{
    // player width
    private int _W = 640;
    // player height
    private int _H = 480;
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            #region Start mode customization via Web Query String
            int idx = 0;
            int auto = 0;
            string qry = "";
            // Autostart
            try {
                qry = "auto"; 
                qry = (Request.QueryString[qry] == null) ? "" : Request.QueryString[qry];
                if (qry != "") { auto = int.Parse(qry); }
            } catch { }
            // Item index
            try {
                qry = "item"; 
                qry = (Request.QueryString[qry] == null) ? "" : Request.QueryString[qry];
                if (qry != "") { idx = int.Parse(qry); }
            } catch { }
            #endregion
            // get value from the list for selected index
            cmbPlaylist.SelectedIndex = idx;
            // generate script on page load
            Literal1.Text = YouTubeScript.Get(cmbPlaylist.SelectedValue, auto, _W, _H);
        }
        else
        {
            // generate script on page postback
            Literal1.Text = YouTubeScript.Get(cmbPlaylist.SelectedValue, 0, _W, _H);
        }
    }
}

Points of Interest

Smooth transition between video items is achieved by using the Microsoft AJAX extension: notice the UpdatePanel where resides the Literal1 control containing the corresponding JavaScript.

Other points of interest may include a video playback customization, related to the linked (not embedded) YouTube video items. These customization technique allows to:

Start video playback at specific position (set offset in minutes and second)
Specify the number of video re-plays (Loop)
Start the video playback in Full Screen Mode
Turn “Related Video” options ON/OFF
Set the Autoplay option
Set the Playback Video Quality

Click on the sample screenshot below to learn more about this useful customization technique

To view detailed YouTube stats click on the sample chart below:

YouTube most popular videos of all times

History

Updated with more customization options and YouTube stats on 04/14/2013
04/30/2013 Time to switch to jQuery 2.0 (done)
04/30/2013 Made this player HTML5-compatible (key changes: <iframe class='youtube-player' type='text/html' frameborder='0' id="player"></iframe> and the rest in jQuery derived from this).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

DrABELL

Chief Technology Officer Infosoft Int'l

United States

Member

Follow on Twitter

Dr. A. Bell has 20+ years of SW/EE experience, published 200+ tech articles and authored 37 inventions; Win/Web veteran, currently focused on: HTML5, CSS3, Javascript, jQuery, SQL, Windows 8, .NET, C#, WPF, Ultrabooks, Mobile. Developed popular Silverlight Media Player, 3 Fractions Calculator and best YouTube API for ASP.NET (#1 Goog). Sample pubs/projects:

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

YouTube™ API for ASP.NET, AJAX-extended (C#).

Type	Article
Licence	CPOL
First Posted	2 Oct 2009
Views	70,898
Downloads	5,539
Bookmarked	102 times

C#ASP.NETJavascript
CSS.NETVisual-Studio, +