Developer's Guide: Data API Protocol – Displaying Video Information

The following screenshot demonstrates how YouTube displays information about a single video. Whereas the screenshot that displays the list of videos only displays information from a single API request, this page synthesizes several API responses into a single page.

The screenshot is annotated, and the list following the screenshot explains how the display elements correspond to the API responses that contain the content.

Note that to display this page, you would first retrieve the feed for the video entry. The XML in a video entry feed is identical to the content that appears for that video in a feed or search result set.

The screenshot displays the following information:

1. Section 1 displays the title of the video. In an API response, the <media:title> tag contains the video's title.

2. Section 2 displays the video itself. You can use the following code snippet to display a YouTube video on your own page. Please note that you must replace the MEDIA_CONTENT_URL and MEDIA_CONTENT_TYPE variables with the appropriate values from the XML feed:

   • To play a video on a web page, replace the MEDIA_CONTENT_URL variable with the url attribute value of the <media:content> tag for which the yt:format attribute value is 5. Also, replace the MEDIA_CONTENT_TYPE variable with the type attribute value from the same <media:content> tag.

   • To play a video on a mobile device, select the appropriate <media:content> tag values based on the value of the yt:format attribute. Replace the MEDIA_CONTENT_URL variable with the url attribute value from that tag. Also, replace the the MEDIA_CONTENT_URL variable with the url attribute value from the tag.

   <object width="425" height="350">
     <param name="movie" value="MEDIA_CONTENT_URL"></param>
     <embed src="MEDIA_CONTENT_URL" 
       type="MEDIA_CONTENT_TYPE" width="425" height="350">
     </embed>
   </object>
   

3. Section 3 displays a variety of action buttons as well as statistics about the video:

   • Action buttons

     • The Share button on YouTube's website displays an inline form that allows a user to send a message to a contact or any other email address. To duplicate this implementation of the Share button, you would need to provide a form that retrieves and displays the contacts for the logged-in user and then allows the user to select contacts to whom to send a message. When the user submits the message, your application would need to submit one API request for each message recipient.

       

     • The Favorite button adds the video to the logged-in user's list of favorite videos. Learn more about adding a favorite video.

     • The Add to Playlists button toggles an inline form that displays a pulldown menu listing the logged-in user's playlists as well as an option to create a new playlist. If the user selects an existing playlist, the video is added to that playlist. If the user chooses to add a new playlist, the form directs the user to another form for adding a playlist. After submitting information about the new playlist, YouTube also adds the video to the playlist.

       To duplicate this functionality, your application would need to send an additional API request to retrieve a list of the user's playlists. If the user selected an existing playlist, your application would add the video to that playlist. If the user elected to create a new playlist, your application would collect the new playlist information, add the playlist and then add the video to the playlist.

     • The Flag button displays an inline form that allows a user to add a complaint about a video. On YouTube's site, the form displays select menus that are used to generate the value of the <summary> tag in the API request for adding the complaint. Your application could display similar pulldown menus or could display a text box allowing the user to enter a complaint.

   • Statistics

     • The star rating is a rounded figure that is based on the <gd:rating> tag's average attribute while the number of ratings is specified by the numRaters attribute on the same tag.
     • The number of views is provided in the <yt:statistics> tag's viewCount attribute.
     • The number of comments is specified in the <gd:feedLink> tag's countHint attribute.
     • The remaining statistics in this section are not provided in API responses.

4. Section 4 displays a list of comments and video responses for the video. (In the example, there are no video responses for the video.) This section displays the following elements:

   • Above the list of comments, the link to post a video response directs the user to a form that allows him to select a previously uploaded video or to upload a new video as a video response.

     To allow the user to select a previously uploaded video, the application retrieves a feed of the videos uploaded by that user. Once the user selected a video, your application would add the video as a video response.

     If the user chooses to upload a new video, your application will need to support either the browser-based uploading or direct uploading method for adding new videos to YouTube. After the user uploads the new video using one of those two methods, your application would retrieve the new video's ID and subsequently add the video as a video response.

   • The second link above the list of comments allows the user to post a text comment. The link toggles an inline form where the user can enter the comment. To provide this functionality, your application would need to send an API request to add the comment after the user submitted the form.

   • To display the list of comments, your application would need to send an additional API request to retrieve the comments feed for the video.

5. Section 5 displays additional information about the video and the person who uploaded the video:

   • To retrieve additional information about the video owner, such as the number of videos that person had uploaded, you would need to send an additional API request to retrieve the owner's profile. A profile feed contains a number of <gd:feedLink> tags that correspond to the something about the user, such as the user's favorite videos, subscriptions or uploaded videos. The countHint attribute of the <gd:feedLink> tag indicates how many favorite videos, subscriptions or uploaded videos the user has.

   • The Subscribe button next to the video owner's name allows a user to subscribe to the video owner's channel, which contains all videos uploaded by the video owner. To duplicate the functionality of the Subscribe button in your application, you would need to send an API request to add a subscription when a user clicks the button.

   • The About This Video part of the box contains additional information about the video. You could use the content in the <media:description>, <media:keywords>, <yt:duration> or other tags to provide more information about a video.

6. Section 6 displays more videos uploaded by the video owner. Learn how to retrieve videos uploaded by a specific user.

7. Section 7 displays a list of videos that YouTube considers similar to the video featured on the page. The related videos feed allows you to retrieve this list using the API.