Skip to content

Instantly share code, notes, and snippets.

@simplethemes

simplethemes/youtube-playlist.html

Created September 29, 2017 16:09
Show Gist options
  • Save simplethemes/e9d4af879f6a2f2f7aff5ca470e52a59 to your computer and use it in GitHub Desktop.
Save simplethemes/e9d4af879f6a2f2f7aff5ca470e52a59 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
youtube-playlist.html
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Video Control Example</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<section class="section">
<div class="columns">
<div class="column">
<h3 class="is-size-3">Video Control Example</h3>
<hr>
<nav class="panel">
<a class="panel-block" href="#" data-timecode="48">
<span class="panel-icon">
<i class="fa fa-play-circle"></i>
</span>
00:48 - Monsters Inc.
</a>
<a class="panel-block" data-timecode="75">
<span class="panel-icon">
<i class="fa fa-play-circle"></i>
</span>
01:15 - UP
</a>
<a class="panel-block" data-timecode="100">
<span class="panel-icon">
<i class="fa fa-play-circle"></i>
</span>
01:40 - Ratatouille
</a>
<a class="panel-block" data-timecode="125">
<span class="panel-icon">
<i class="fa fa-play-circle"></i>
</span>
02:05 - Toy Story
</a>
<a class="panel-block" data-timecode="192">
<span class="panel-icon">
<i class="fa fa-play-circle"></i>
</span>
03:12 - The Incredibles
</a>
<a class="panel-block" data-timecode="210">
<span class="panel-icon">
<i class="fa fa-play-circle"></i>
</span>
03:30 - Cars 2
</a>
</nav>
<progress id="progress" class="progress is-large" max="348">60%</progress>
<div class="tags has-addons">
<span class="tag is-dark">Current Time</span>
<span class="tag is-info" id="current-time"></span>
</div>
</div>
<div class="column">
<div id="video-player"></div>
</div>
</div>
</section>
</div> <!-- /container -->
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-player', {
width: 720,
height: 405,
videoId: 'HJSxwwZI4XI',
playerVars: {
color: 'white',
autoplay: 1,
controls: 0,
disablekb: 1,
enablejsapi: 1,
fs: 0,
iv_load_policy: 3,
modestbranding: 1,
playsinline: 1,
rel: 0,
showinfo:0
},
events: {
onReady: initialize
}
});
}
function initialize(){
console.log('initialized');
updateTimerDisplay();
time_update_interval = setInterval(function () {
updateTimerDisplay();
}, 1000)
}
$('.panel-block').click(function(event) {
var time = $(this).data('timecode');
console.log(time);
player.seekTo(time);
updateTimerDisplay();
player.playVideo();
});
function updateTimerDisplay(){
// Update current time text display.
$('#current-time').text(formatTime( player.getCurrentTime() ));
// $('#duration').text(formatTime( player.getDuration() ));
$('#progress').attr('value', player.getCurrentTime());
}
function formatTime(time){
time = Math.round(time);
var minutes = Math.floor(time / 60),
seconds = time - minutes * 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ":" + seconds;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment