Displaying Selected YouTube Video Thumbnails On An ASP.NET Web Forms Page

I received a kind email recently from a reader, thanking me for my article titled “Retaining Values In A Form Following PHP Postback And Clearing Form Values After Successful PHP Form Processing“.

He also asked how he could use the YouTube Data API to search for videos by keyword; display thumbnails of those videos on an ASP.NET page; then either hyperlink to those videos on YouTube, or display them on his page via the YouTube Player API.

I’ll address that specific question in an upcoming post. First, I want to show how to do what the questioner asks if you already know the video IDs of specific YouTube videos you want to show on a page.

If you know the video ID(s) for the YouTube videos you want to display on a page, you can call them directly from YouTube’s image servers, thanks to a predictable URL and naming scheme, and hotlinking.

As this thread at Stack Overflow notes, every YouTube video has at least three thumbnails, numbered 1.jpg to 3.jpg. These images are 120px by 60px and are roughly taken at the start, middle, and end of the video, respectively.

The file named default.jpg is the default thumbnail at 120px x 90px resolution. Two others — 0.jpg and hqdefault.jpg — are 480px x 360px. All three of these default images are copies of whichever of the three video thumbnails has been set as the default frame capture for the video.

Finally, a maximum resolution version, available as maxresdefault.jpg, is available if there is a high-definition (720p or 1080p) version of the video. It measures 1280px x 720px. When there isn’t a high definition version of the video, this appears as the generic YouTube thumbnail icon, at 120px x 90px resolution.

So, here are all the thumbnail images available for Lisa Hannigan’s “What’ll I Do” music video (hover over each image to see its name):

And here are the thumbnails for a decidedly low-res video for The Monkees’s song, “Last Train To Clarksville”:

ASP.NET Web Forms Code To Display And Hyperlink Known YouTube Video Thumbnails

Here’s some simple ASP.NET Web Forms code to add hyperlinked thumbnails for five different YouTube videos, the IDs of which we know, to a Panel control. (I’m assuming here that the Panel control is named pnlThumbs.)

Sub AddVideoThumbs()
	'create ArrayList of known video IDs
	Dim arrIDs As New ArrayList
	arrIDs.Add("STxXS5lLunE")
	arrIDs.Add("Mwrl6bWfvrc")
	arrIDs.Add("4nTo8rjo-lM")
	arrIDs.Add("eVVXtknZVf0")
	arrIDs.Add("pxg113O_SRI")

	'some temp string variables for our processing loop
	Dim strTemp As String
	Dim strLink As String
	Dim strSrc As String

	For Each strTemp In arrIDs
		strSrc = "http://img.YouTube.com/vi" & strTemp & "/default.jpg" 'path to default thumbnail
		strLink = "http://www.YouTube.com/watch?v=" & strTemp 'path to video on YouTube

		Dim objLink As New HyperLink 'create hyperlink
		objLink.NavigateUrl = strLink
		objLink.ImageUrl = strSrc
		objLink.Text = strTemp 'sets alt text to ensure XHTML compliance
		objLink.Target = "video" 'will open all videos in same, new window / tab
		objLink.CssClass = "margin-0-5" 'a specific-to-me CSS class to space out the thumbnails

		pnlThumbs.Controls.Add(objLink)
	Next
End Sub

In an upcoming post, I will describe how to use the YouTube Data API to search for videos, display their thumbnails on a page, and hyperlink to those videos. I’ll also package all the demo code together for download at that time.

All links in this post on delicious: http://delicious.com/dougvdotcom/displaying-selected-youtube-video-thumbnails-on-an-asp-net-web-forms-page