Google Developers Academy

Building a YouTube Player with Chapter Markers

Learning objectives

Use the YouTube iframe Player API to build a custom player with clickable chapter markers.

Prerequisites
  • Intermediate experience with JavaScript
  • Basic experience with HTML
  • Basic experience with DOM manipulation

This class demonstrates how you can embed a YouTube video and a list of chapter titles on a web page. Clicking on any chapter will jump to a predefined section of the video.

Sample App

A live demo of the completed code can be found at http://gdata-samples.googlecode.com/svn/trunk/ytplayer/ChapterMarkerPlayer/index.html

Scope

  • YouTube Player API
  • JavaScript
  • HTML

Lessons

  • Defining an interface to the library

    To use a JavaScript library on a web page, the library needs a well-defined interface. This should include a namespace and an initialization method within that namespace, which takes in parameters.

  • Embedding a YouTube video using the iframe Player

    The iframe Player is the preferred method of embedding YouTube videos, and it supports a JavaScript API for creating new embeds on a page. The iframe Player API will be loaded dynamically at runtime, and once it’s available, it will invoke one or more callbacks to insert YouTube embedded players into the current page.

  • Generating a list of chapter markers

    The chapter marker list is a clickable navigation guide, allowing viewers the chance to jump to one of the pre-defined sections of a video.

  • Customizing the user interface with CSS

    The previous lessons built a functional player with clickable chapter marker links, but the user interface was bare-bones. The default styles that the browser uses for different HTML elements are functional, but don’t lead to the best user experience. Custom CSS rules can enhance the visual appeal of the chapter marker player.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.