Use the YouTube iframe Player API to build a custom player with clickable chapter markers.
- 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.
A live demo of the completed code can be found at http://gdata-samples.googlecode.com/svn/trunk/ytplayer/ChapterMarkerPlayer/index.html
- YouTube Player API
Defining an interface to the library
Embedding a YouTube video using the iframe Player
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.