Friday, March 30, 2012

New Player Options for Lists of Videos

Update (May 2012): The showinfo=1 parameter can now be included in the player's URL to indicate that the list of video thumbnails should be initially visible. The example below has been updated to illustrate this usage.

Most developers know that the YouTube embedded player can display a single video, but did you know that it can be used to display a list of videos as well? There have been a number of recent enhancements around list playback functionality, and if you’re not already taking advantage of those new features, we wanted to let you know what you’re missing out on.

The first change of note is the syntax for embedding the player in an HTML document. As for single-video playback, you can use the <iframe> embed code to load a list of videos, and the IFrame embed supports HTML5 <video> playback in environments where Flash is not available.

Another exciting change relates to the lists of videos that you can load. The player is no longer limited to just displaying videos from an actual YouTube playlist. You can also load a user's uploaded videos, a user's favorite videos, or videos matching a specific search term. In the embed URL, the listType and list parameters control the list of videos that is loaded. The listType value can be either playlist (the default), user_uploads, or search. Depending on the listType value, the list parameter value should be set to the desired playlist id, YouTube user ID, or search term. For example, the following embed code displays the most recent videos uploaded in the “GoogleDevelopers” YouTube channel:

<iframe width="560" height="315" src="http://www.youtube.com/embed/?listType=user_uploads&list=GoogleDevelopers&showinfo=1" frameborder="0" allowfullscreen></iframe>

The corresponding embedded player is shown below:



Finally, for developers who want more control over their player than what a simple embed code offers, a full YouTube JavaScript API is available for use. There are methods for loading lists, moving to the next/previous video in a list, and controlling whether playback is shuffled or looped. To give you an idea of how you can use this new JavaScript Player API functionality, we’ve put together a sample page that you can experiment with and use as inspiration when developing your own code.

Cheers,
—Jeff Posnick, YouTube API Team