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
You can see this in action here: http://www.dougv.net/demos/youtube_data_api_thumbs/Default.aspx
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