Monday, 18 February 2013

Displaying YouTube videos in ASP.NET MVC Application






 Following this tutorial you will be able to get videos from channel and display them in a view. Channel name is hard coded to "blendercookie". It is very easy to pass the parameter from view Text box to controller with the channel name, but for this example I will leave it hard coded. 

I used Visual Studio 2010, MVC 3, C# and Razor syntax.

1       Download 3 packages from NuGet: 
 In you package manager console type:
      ○     Install-Package Google.GData.YouTube
     Install-Package Google.GData.Client
     Install-Package Google.GData.extensions



Once you successfully install those packages you will see new dll’s under reference folder



You will need to obtain unique google developer key. To do this go to http://code.google.com/apis/youtube/dashboard/gwt/
2      Write a new class inside Model.

This model is a List of YouTube objects with Youtube name and videoID

    public class YouTube
    {
        public string YouTubeMovieID { get; set; }
        public string YouTubeMovieTitle { get; set; }
    }

    public class YouTubeHelper
    {
        const string YT_CHANNEL_NAME = "blendercookie";
        const string YT_DEVELOPER_ID = "SOMETHING LIKE THAT : AI39si4MmBNkAvglhJrirLO19NpGcehhfdhdfDyT1qHRigohHdYDw8Lj2l_G_6djdfjdFQPGnGFTfxpwewuhJMukVxUZjmXA";

        public static List<YouTube> GetVideos()
        {
            YouTubeRequestSettings ytSettings = new YouTubeRequestSettings("YouTubeTest", YT_DEVELOPER_ID);
            YouTubeRequest ytRequest = new YouTubeRequest(ytSettings);
            string feedURL = String.Format("http://gdata.youtube.com/feeds/api/users/{0}/uploads?orderby=published", YT_CHANNEL_NAME);
            Feed<Video> videoFeed = ytRequest.Get<Video>(new Uri(feedURL));
            return (from video in videoFeed.Entries
                    select new YouTube() { YouTubeMovieID = video.VideoId, YouTubeMovieTitle = video.Title }).ToList();
        }

    }



3. In controller create a model YouTubeHelper
      

        public ActionResult YouTube()
        {
            var videos = YouTubeHelper.GetVideos();
            return View(videos);
        }

4. Finally in View display youtube videos.


<h2>YouTube</h2>

@foreach (var v in Model)
{
<object width="427" height="258">
           <param name="movie" value="http://www.youtube.com/v/@v.YouTubeMovieID" />
           <param name="allowFullScreen" value="true" />
           <param name="allowscriptaccess" value="always"/>
           <param name="wmode" value="opaque" />
           <embed src="http://www.youtube.com/v/@v.YouTubeMovieID"
              type="application/x-shockwave-flash" width="427"
              height="258" allowscriptaccess="always" allowfullscreen="true"
              wmode="opaque"></embed>  </object>
      
}


Modify _Layout file from Shared folder so you can add link to youtube view. Find ul with        id=”menu” and add new ActionLink.

<ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("YouTube", "YouTube", "Home")</li>
                </ul>


That’s how your website should look like once you finish.