YouTube, MS MVC and jQuery

In this entry I’m going to make a MS MVC PartialView (usercontrol) which will take in a search term and render a YouTube video down to the page.

You can see how this will look on TV Shout, where I’ve used it to display film trailers on the listing pages of films.

You should be able to drop the code into your MVC project and instantly get some YouTube integration on your website.

If you want you can grab the code for the tutorial here.


The Google Data API

First up we’re going to need some references to the Google Data API.

“The Data API allows a program to perform many of the operations available on the YouTube website. It is possible to search for videos, retrieve standard feeds, and see related content. A program can also authenticate as a user to upload videos, modify user playlists, and more.”

We’re going to keep it simple here, and just use the API to query YouTube to look up videos.

Grab the .Net API Library from Google code. We need to add references in our project to:

Google.GData.Client.dll
Google.GData.Extensions.dll


The Controller and Search Code

Create a function in your controller (not the best place for it, but for brevity...) called GetFeed. This method will run off to YouTube and return an AtomFeed with a specified number matching videos:

Private Shared Function GetFeed(ByVal url As String, ByVal start As Integer, ByVal number As Integer) As Google.GData.Client.AtomFeed
  Dim query As New FeedQuery("")
  Dim service As New Service("youtube", "exampleCo")
  query.Uri = New Uri(url)
  query.StartIndex = start
  query.Query = Replace(query.Query, "%20", " ")
  query.NumberToRetrieve = number

  Dim myFeed As Google.GData.Client.AtomFeed = service.Query(query)
  Return myFeed
End Function

Next, we need to add the controller function which will return a PartialViewResult. We will be hitting this function via an AJAX call from the client web page, and it will be sending back the HTML to our page required for displaying the video player.

Public Function YouTubeVideo(ByVal searchTerm As String) As PartialViewResult
  Dim url = "http://gdata.youtube.com/feeds/videos?q=" + searchTerm
  Dim myFeed = GetFeed(url, 1, 1)
  Dim idSimple = ""
  If myFeed.Entries.Count > 0 Then
      ' We just need the unique ID of the video - grab it from the unique URI
      Dim uriSection() = myFeed.Entries(0).Id.Uri.ToString.Split("/")
      idSimple = uriSection(uriSection.Count - 1)
  End If

  Return PartialView("YouTubeVideo", idSimple)
End Function

The Views

Next up we need to add a PartialView for the video mark-up. Add a user control to your page. We want to set the Model of this user control to be of type string:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of String)" %>
<%  If Not Model = "" Then %>
<div id="video">
<object width="540" height="444">
<param name="movie" value="http://www.youtube.com/v/<%=Model %>?color1=0xb1b1b1&color2=0xcfcfcf&hl=en&feature=player_embedded&fs=1">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/<%=Model %>?hl=en&feature=player_embedded&fs=1"
type="application/x-shockwave-flash" allowfullscreen="true"
allowScriptAccess="always" width="540" height="444">
</object>
</div>
<%  End If%>

In this user control, we will set the Model to the Unique ID of the YouTube Video. This value will then be injected into a YouTube URL creating something similar to the following:

http://www.youtube.com/v/WhBoR_tgXCI

(May as well watch the above video whilst you’re reading the rest of this... DubFX is heavy, I’m sure you’ll agree)


Showing a video on your page

We are now at the stage that your shiny new YouTube user control can be used in your web app.
We just need to create an AJAX call from the particular view we want to place the video in, to our controller method : YouTubeVideo()

Add a link to jQuery in the Head of your view (as if you haven’t got one there already) and a div to place the video in.


Next up we add the jQuery script to call the

<script type="text/javascript">
$(document).ready(function() {
  $.get('/[[YourControllerName]]/YouTubeVideo?SearchTerm=[[YourSearchTerm]],
          function(data) {
              $('#youtubeVid').html(data);
              return false;
          });
});

</script>

And that’s you done. YouTube videos integrated!

The code here is simplified and could probably do with some tidying up if you want to use it in a production system.