Generate Interactive Chapters For Youtube Videos – youtube-chapters

Category: Javascript | March 6, 2019
Author:VD39
Views Total:1,632 views
Official Page:Go to website
Last Update:March 6, 2019
License:MIT

Preview:

Generate Interactive Chapters For Youtube Videos – youtube-chapters

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:

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
});

You Might Be Interested In:


Leave a Reply