YouTube chapters generator will automatically generate chapters for you based on an object of set times.
New Features:
+ NPM install
+ Chaining methods
+ New ready methodnpm i youtube-chapters --saveimport '../node_modules/youtube-chapters/dist/css/youtube-chapters.css';
import YTC from 'youtube-chapters';Begin by adding these tags to your document's <head>:
Found in the app/assets folder.
<link href="./path/to/youtube-chapters.min.css" rel="stylesheet">
<script src="./path/to/youtube-chapters.min.js"></script>Next, just create a simple <div> element, but with an additional id or class attribute.
- NOTE: Using a class will only render this for one element, I recommend you use `id` every time.<div id="player"></div>To initialise the setup use the YTC function and pass in the element and options:
var options = {
youtubeId: 'ZyvwODEjmXw',
id: 'soundtrack',
loadingText: '<p>Loading text</p>',
fluid: true,
width: '500px',
height: '150px',
playerVars: {
iv_load_policy: 3,
showinfo: 0,
modestbranding: 1,
wmode: 'transparent'
},
showTime: false,
chapters: [
{
'time': '0m 0s',
'title': '01 - Advent Rising - Muse',
'id': 'id1',
'text': '01 - Advent Rising - Muse'
},
{
'time': '03:43',
'title': '02 - Legend of Zelda - Suite',
'id': 'id2',
'text': ''
}
]
};
YTC('#player', options);Note: All options have a set default.
Type:
string
Sets the YouTube video based on the ID.
Type:
stringDefault:random number
Sets the ID to be used, set this if you want to manipulate the DOM as a random number will be set every time.
Type:
string
Sets loading HTML/string text, visible while the video is loading.
Type:
booleanDefault:false
Sets if the YouTube video should be fluid/responsive.
Type:
stringDefault:100%
Sets the video and wrapper width.
Type:
stringDefault100%
Sets the video height.
Type:
objectDefault{}
Sets the YouTube playerVars, refer to the YouTube API refrence.
Type:
booleanDefaultfalse
Sets if the times should appear in the chapter elements.
Type:
array/objectDefault[{}]
Sets the chapters of the YouTube video.
Type:
string
Sets the time of the current chapter. You may use two format for this, hms and hh:mm:ss. If you set showTime to true, then the time will appear as is. So if you use hms ensure you add a space between each time.
'time': '0m 0s' //better to use 1h 0m 0s rather than 1h0m0s
'time': '03:43'Type:
string
Sets the title of the current chapter.
Type:
string
Sets the id of the current chapter.
Type:
string
Sets the optional supporting text for the current chapter.
Ready function to call once the video has loaded.
Here you can manipulate the DOM and get access to the YouTube player.
YTC(element, options)
.ready(function (player) {
....
});
or
let player = new YTC();
player.ready(function (player) {
....
});Goes to the video position of the chapter ID.
YTC(element, options)
.goToChatperId('id1');
or
let player = new YTC();
player.goToChatperId('id1');Goes to the position of the YouTube video.
YTC(element, options)
.seekTo('03:43'); or
.seekTo('2m 0s'); or
.seekTo(67);
or
let player = new YTC(element, options);
player.seekTo('03:43'); or
player.seekTo('2m 0s'); or
player.seekTo(67);Plays the YouTube video.
YTC(element, options)
.play();
or
let player = YTC(element, options);
player.play();Pauses the YouTube video.
YTC(element, options)
.pause();
or
let player = YTC(element, options);
pause.play();New features to come:
- New theme
- Responsive layout