Welcome to Shaun Luttin's public notebook. It contains rough, practical notes. The guiding idea is that, despite what marketing tells us, there are no experts at anything. Sharing our half-baked ideas helps everyone. We're all just muddling thru. Find out more about our work at bigfont.ca.

YouTube JavaScript API

Tags: youtube, javascript

We would like to show YouTube videos on our 1in52.com website, and to maintain control over the organization of videos. This is research into the options that YouTube provides.

Our requirements are to list and organize the names of videos. One way is to use the Data API. My concern is that the network connections might be slow, and implementing a caching or async solution might be overkill. Another option is just to use the simple embedded player, and to organize and lazy-load the videos through JavaScript. That would mean creating a dictionary, so to speak, of video-code/video-information pairs. The con here is that we’re not leveraging YouTube as a CMS for video information storage. Using the Data API gives us the most control and allows us, down the road, to do other cool stuff like ratings.

Data API Getting Started Checklist

  • Register your application. Done.
    • Go to the dev console.
    • Create a new project.
    • Turn on the YouTube Data API v3
    • Choose the appropriate credentials (OAuth 2.0, to access private user data, Service Account, to obviate user consent)
    • Save the JSON key in a safe place (super secret USB drive).
  • Familiarize yourself with the core concepts of JSON. Done.
  • Read the Getting Started with the YouTube Data API.
  • Optional – Read the authentication guide (e.g. for ratings, uploads, etc)
  • Consult the API reference guide for resource, method, and property descriptions.
  • See also: https://developers.google.com/youtube/v3/?hl=fr

OAuth 2.0

  • there are pretty diagrams here: https://developers.google.com/accounts/docs/OAuth2
  • for applications that request private user data
  • the HTTP request sends client ID and optional client secret to obtain a token
  • web application – basically, we access the Data API through a YouTube end-user’s account
    • we access the Data API through JavaScript or server-side code
    • if JavaScript, then we must supply authorized JavaScript origins.
    • if server-side, then we must supply authorized redirect URLs
  • service account – basically, we access the Data API through a service account not a YouTube end-user account
    • an application (call it serviceApp)
    • that calls an API (e.g. that calls the YouTube API)
    • on behalf of another application (call it clientApp)
    • clientApp –> serviceApp –> YouTube Data API
    • neither the clientApp nor the serviceApp has access private user information
    • the serviceApp must must prove its identity to the Data API
    • the most important advantage is that there is NO USER LOGIN AND CONSENT
  • installed application - this is for desktop or mobile apps that run in Windows, iOS, and Android, for instance.


  • for applications that do NOT request private user data
  • they key just identifies our project, so that Google can keep stats on it

Some of the YouTube API options that we considered include:

Player, Player APIs, and Player Tools

  • players are <iframe> or <object> tags
  • all players must be at least 200px by 200px
  • there are two JavaScript player APIs
    • IFrame Player API – control a player embedded in an iFrame
    • JavaScript player API – control an embedded or chromeless player

Embedded Player

  • contains player controls
  • add a player to the website
  • show individual videos or a playlist
  • customize it with player parameters (e.g. autoplay)

Chromeless Player

  • player with no controls
  • lets you create your own player controls
  • customize it with the Player APIs

YouTube Data API

  • perform most operations a normal YouTube user can on the YouTube website
  • this is for server-side logic
  • allows for deep integration with YouTube
  • operations include
    • search for videos
    • retrieve standard feeds
    • see related content
    • authenticate
      • upload videos
      • modify playlists
      • rate and comment on videos
    • etc

YouTube Live Streaming API

  • control the YouTube player using JavaScript
  • manage live events on YouTube as they happen

Difficulty Table

The API Overview Guide provides the following table:

Basic Player APIs with embedded player
Medium Player APIs with chromeless player
Advanced Data API and Player APIs with chromeless player