Generate Interactive Chapters For Youtube Videos – youtube-chapters

Preview:

Description:

youtube-chapters is a vanilla JavaScript plugin to generate interactive chapters for long Youtube videos. So that the visitors are able to quickly jump between multiple segments of your video by clicking the chapter links.

See also:

• Create Interactive Chapters For Long HTML5 Videos – vidcha.js

How to use it:

Load the stylesheet youtube-chapters.min.css and JavaScript youtube-chapters.min.js in the page.

<link href="dist/css/youtube-chapters.min.css" rel="stylesheet">
<script src="dist/js/youtube-chapters.min.js"></script>

Create a placeholder element to place the Youtube video player.

<div id="player"></div>

Initialize the youtube-chapters plugin on the placeholder element and specify the Video ID.

YTC('#player', {
  youtubeId: 'DLspaHs4N5s'
});

Add custom chapter markers to the Youtube video.

YTC('#player', {
  youtubeId: 'DLspaHs4N5s',
  chapters: [
  {
    time: '0m 0s',
    title: '01 - Chapter 1',
    id: 'id1',
    text: '01 - Chapter 1',
  },
  {
    time: '03:43',
    title: '02 - Chapter 2',
    id: 'id2',
    text: '02 - Chapter 2',
  },
  {
    time: '06:43',
    title: '03 - Chapter 3',
    id: 'id3',
    text: '03 - Chapter 3',
  }]
});

More configuration options.

YTC('#player', {
  // Sets to true if the YouTube video should be fluid/responsive
  fluid: false,
  // Random ID
  id: '',
  // Video loader
  loader: '',
  // Width/height of the video
  width: '500px',
  height: '350px',
  // Sets the YouTube playerVars
  playerVars: {
    iv_load_policy: 3,
    showinfo: 0,
    modestbranding: 1,
    wmode: 'transparent',
  },
  // Sets to true if the times should appear in the chapter frame.
  showTime: false
});