For the past couple of weeks, I’ve been working with the YouTube API in order to build some new functionality into Ackura PressRoom. The aim was to build a dialog to browse or search videos from YouTube in order to select one for inclusion in a Social Media Release.

I started by building a quick wireframe of the dialog using Balsamiq Mockups (a very handy little tool which I intend to review properly soon).

The wireframe built with Balsamiq Mockups

The Interface was built in ASP.Net and consists of three main parts:

1. The Dialog Framework page – this is the scaffold for the dialog which contains all of the specific javascript and CSS for the dialog
2. The List/Search script – used to retrieve the video listings in the left-hand side of the dialog.
3. The Video Preview script – used to retrieve the details for a specific video and load it into the preview area on the right-hand side of the dialog

I used jQuery’s Ajax capabilities to ensure that, for the user, the experience of using the dialog is as smooth and intuitive as possible. Google’s .Net API wrapper provided the tools that I needed to fetch the data from YouTube.

The completed dialog

As you can see very few changes needed to be made between the original wireframe and the completed dialog. The numbered paging was dropped due to the fact that YouTube only returns an estimation of the number of results. I also added in a cancel button to allow the dialog to be closed without having selected a video to include.

There are more details on how the dialog works over on the Ackura blog and I’ll try to put together a post detailing some of the more technical aspects of how I built this soon.