Click here to Skip to main content
Click here to Skip to main content

YouTube™ API for ASP.NET

, 15 Aug 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
YouTube™ API for ASP.NET, AJAX-extended (C#).

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

Link to WebTV app based on YouTube API for ASP.NET

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:

  1. Create or open an ASP.NET Web Site using either Microsoft Visual Studio 2008 (any edition) or the Visual Web Developer 2008 Express edition.
  2. Download the compressed (.zip) file. Extract the components into your web application directory.
  3. Set the embedded YouTube™ Video Player dimension: W/H.
  4. Customize the YouTube™ Video Player border options.
  5. 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.

YouTube video playback customization

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

YouTube video player sample screenshot

YouTube core stats: Top-20 of all time

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

YouTube video player sample screenshot

YouTube Top-20 of all time

 

YouTube video player sample screenshot

YouTube Top-20 classical music-videos of all time

History

  • Updated with more customization options and YouTube stats on 08/01/2014
  • 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).

References

  1. YouTube™ Embedded Video Player: Extended API (C#)
  2. Click/select row in ASP.NET GridView or HTML table
  3. Nested GridView controls in ASP.NET: best practices
  4. Hyperlinked Images in ASP.NET GridView

License

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

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience: Win/Web veteran published 300+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, .NET, ASP.NET, WPF, C#, SQL, 'Big Data', AI, Speech Technology and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Engineering Calculator VOLTA-814D
  5. SQL generates large data sequence
  6. Aggregate Product function extends SQL
  7. Watch Your Mouse!
  8. Top-100 Digital Cameras
  9. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects w/total code base exceeding 250k lines.
Follow on   Twitter

Comments and Discussions

 
SuggestionThough I'm not test it (UAT) yet but nice poset, I think <b><big></big>Tips/Tricks</b> section you may consider so far. PinmentorMd. Marufuzzaman15-Aug-14 5:22 
Questionhow to upload video in youtube using javascript? Pinmemberamit_8320-Jan-14 18:13 
AnswerRe: how to upload video in youtube using javascript? PinprofessionalDrABELL21-Jan-14 4:51 
GeneralMy vote of 5 PinprofessionalBadassAlien20-Aug-13 22:37 
GeneralRe: My vote of 5 PinprofessionalDrABELL21-Aug-13 0:36 
GeneralMy vote of 5 PinmemberJohn B Oliver8-May-13 12:05 
GeneralRe: My vote of 5 PinmemberDrABELL8-May-13 13:14 
GeneralMy vote of 5 PinmemberTechnoGeek00114-Apr-13 23:03 
GeneralRe: My vote of 5 PinmemberDrABELL15-Apr-13 1:15 
GeneralNEW!! Embedded YouTube Player (WebTV project, Beta) PinmemberDrABELL5-Jun-11 11:32 
GeneralYouTube® video playback customization technique PinmemberDrABELL2-Feb-11 6:40 
GeneralShort URL PinmemberDrABELL3-Jan-11 5:41 
GeneralMy vote of 5 PinmemberMehedi_Hasan28-Oct-10 10:33 
GeneralRe: My vote of 5 PinmemberDrABELL7-Dec-10 6:20 
Generalsome query Pinmembermakhar22-Jul-10 17:47 
GeneralRe: some query PinmemberDrABELL7-Dec-10 6:32 
Hello Pankaj;
 
Thanks for your note. As FYI: there is an updated version of youTube player embedded in ASP.NET. Here is the: LINK. It provides the automatic playlist progression. Also, the starting song to play could be selected from the list by its index, added to the web query: for example, typing the http://webinfocentral.com/RESOURCES/VideoAudio.aspx?idx=2 in web browser's address bar will play the "Sounds of Silence", etc.
 
Have a great day. Best regards,Alex

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141022.2 | Last Updated 15 Aug 2014
Article Copyright 2009 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid