<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>YoutubeAPI - Control Youtube Videos with JAVASCRIPT!</title>
<link rel="stylesheet" href="demo.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/tomorrow.min.css">
</head>
<body bgcolor="#2C2C2C" id="body1">
<div id="video-placeholder"></div>
<style type="text/css">
#video-placeholder {
border: 1px #2C2C2C solid;
}
body,html{
overflow:hidden
}
#body1 {
background: #0a0a0a;
height: 1500px;
}
#play {
position: fixed;
left: 800px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
top: 590px;
}
#pause {
position: fixed;
left: 700px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
top: 590px;
}
#mute-toggle {
position: fixed;
left: 750px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
top: 590px;
}
#timetime {
position: fixed;
font-family: Roboto;
left: 735px;
top: 535px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
top: 625px;
}
.material-icons.custom {
color: #fff; }
#next {
position: fixed;
left: 850px;
bottom: 263px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
top: 590px;
}
#prev {
position: fixed;
left: 650px;
bottom: 263px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
top: 590px;
}
#e1 {
position: fixed;
left: 50px;
top: 20px;
}
#e2 {
position: fixed;
left: 50px;
top: 230px;
}
#e3 {
position: fixed;
left: 50px;
top: 430px;
}
#text {
position: fixed;
left: 400px;
bottom: 263px;
color: #2C2C2C;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
top: 700px;
}
</style>
<div id="controls">
<p style="color: #2C2C2C;" id="timetime"><span id="current-time">0:00</span> / <span id="duration">0:00</span></p>
<i style="color: #2C2C2C;" id="play" class="fa fa-play"></i>
<i style="color: #2C2C2C;" id="pause" class="fa fa-pause"></i>
<i style="color: #2C2C2C;" id="mute-toggle" class="fa fa-volume-up"></i>
<i style="color: #2C2C2C;" id="next" class="fa fa-forward"></i>
<i style="color: #2C2C2C;" id="prev" class="fa fa-backward"></i>
<img id="e2" class="thumbnail" src="http://img.youtube.com/vi/Mh64-FRUEog/hqdefault.jpg" data-video-id="Mh64-FRUEog" title="Mh64-FRUEog">
<img id="e1" class="thumbnail" src="http://img.youtube.com/vi/92yHw3WEMZU/hqdefault.jpg" data-video-id="92yHw3WEMZU" title="92yHw3WEMZU">
<img id="e3" class="thumbnail" src="http://img.youtube.com/vi/N2yXLkg3Ltg/hqdefault.jpg" data-video-id="N2yXLkg3Ltg" title="N2yXLkg3Ltg">
</div>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #eee;
}
body{
font: normal 14px sans-serif;
}
header{
box-sizing: border-box;
text-align: center;
width: 100%;
padding: 25px 40px;
background-color: #3A56B7;
overflow: hidden;
}
header h1{
float: left;
font: normal 24px/1.5 'Open Sans', sans-serif;
color: #fff;
}
header a{
color:#fff;
float: right;
text-decoration: none;
display: inline-block;
padding: 13px 50px;
border-radius: 3px;
font: bold 14px/1 'Open Sans', sans-serif;
text-transform: uppercase;
background-color:#F05283;
}
#video-placeholder{
position: relative;
left: 300px;
}
#controls{
margin-right: 40%;
}
#controls ul{
list-style: none;
}
#controls pre{
border: 6px solid #E7E9F3;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#controls ul li {
margin: 40px;
}
#controls ul li code{
padding: 24px;
line-height: 1.45;
font-size: 13px;
}
h2{
display: block;
margin-bottom: 24px;
font-size: 26px;
color: #43495F;
}
h2 ~ * {
margin-bottom: 24px;
}
h2 + pre {
margin-top: 36px;
}
.thumbnail{
cursor: pointer;
margin: 0 10px 20px 0;
border: 6px solid #2C2C2C;
box-shadow: 0 1px 2px #1B1B1B;
width: 200px;
}
#progress-bar{
position: relative;
width: 100%;
height: 20px;
cursor: pointer;
}
#controls i {
color: #000;
font-size: 32px;
cursor: pointer;
}
#volume-input{
height: 32px;
width: 45px;
}
#next,
#prev{
display: block;
}
@media (max-width: 1000px) {
header h1{
float: none;
}
header a{
margin-top: 25px;
float: none;
}
}
@media (max-width: 1200px) {
#video-placeholder{
max-width: 100%;
position: static;
}
#controls{
margin-right: 0;
}
#bsaHolder{ display:none;}
}
var player,
time_update_interval = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 1000,
height: 580,
videoId: '92yHw3WEMZU',
playerVars: {
color: 'red',
controls: 0,
iv_load_policy: 3,
playlist: 'Mh64-FRUEog,N2yXLkg3Ltg'
},
events: {
onReady: initialize
}
});
}
function initialize(){
// Update the controls on load
updateTimerDisplay();
updateProgressBar();
// Clear any old interval.
clearInterval(time_update_interval);
// Start interval to update elapsed time display and
// the elapsed part of the progress bar every second.
time_update_interval = setInterval(function () {
updateTimerDisplay();
updateProgressBar();
}, 1000);
$('#volume-input').val(Math.round(player.getVolume()));
}
// This function is called by initialize()
function updateTimerDisplay(){
// Update current time text display.
$('#current-time').text(formatTime( player.getCurrentTime() ));
$('#duration').text(formatTime( player.getDuration() ));
}
// This function is called by initialize()
function updateProgressBar(){
// Update the value of our progress bar accordingly.
$('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}
// Progress bar
$('#progress-bar').on('mouseup touchend', function (e) {
// Calculate the new time for the video.
// new time in seconds = total duration in seconds * ( value of range input / 100 )
var newTime = player.getDuration() * (e.target.value / 100);
// Skip video to new time.
player.seekTo(newTime);
});
// Playback
$('#play').on('click', function () {
player.playVideo();
});
$('#pause').on('click', function () {
player.pauseVideo();
});
// Sound volume
$('#mute-toggle').on('click', function() {
var mute_toggle = $(this);
if(player.isMuted()){
player.unMute();
mute_toggle.addClass('fa-volume-up')
mute_toggle.removeClass('fa-volume-off')
}
else{
player.mute();
mute_toggle.addClass('fa fa-volume-off');
mute_toggle.removeClass('fa-volume-up')
}
});
$('#volume-input').on('change', function () {
player.setVolume($(this).val());
});
// Other options
$('#speed').on('change', function () {
player.setPlaybackRate($(this).val());
});
$('#quality').on('change', function () {
player.setPlaybackQuality($(this).val());
});
// Playlist
$('#next').on('click', function () {
player.nextVideo()
});
$('#prev').on('click', function () {
player.previousVideo()
});
// Load video
$('.thumbnail').on('click', function () {
var url = $(this).attr('data-video-id');
player.cueVideoById(url);
});
// Helper Functions
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;
}
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
