Author: | VD39 |
---|---|
Views Total: | 1,632 views |
Official Page: | Go to website |
Last Update: | March 6, 2019 |
License: | MIT |
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:
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 });