youtube-chapters
Version:
A chapters markers generator plugin for a YouTube video, built using JavaScript.
84 lines (71 loc) • 1.92 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>YouTube Chapters</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="./css/youtube-chapters.css" rel="stylesheet">
<style>
.wrapper {
margin: auto;
width: 900px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="player"></div>
<div id="player1"></div>
</div>
<script src="./js/youtube-chapters.js"></script>
<script>
var options = {
youtubeId: 'ZyvwODEjmXw',
id: '',
loadingFrame: '',
fluid: true,
width: '500px',
height: '150px',
playerVars: {
iv_load_policy: 3,
showinfo: 0,
modestbranding: 1,
wmode: 'transparent'
},
showTime: true,
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)
YTC('#player1', options)
// .seekTo('03:43');
// .seekTo('0m 0s');
// .onReady(function (player) {
// //add set option to add user own random number
// document.querySelectorAll('.chapter-point')[1].style.backgroundColor = 'red';
// })
// .play()
// .pause();
// YTC('#player1', options)
// .onReady(function (player) {
// //add set option to add user own random number
// document.querySelectorAll('.chapter-point')[1].style.backgroundColor = 'red';
// })
// .play();
</script>
</body>
</html>