<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div class="container">
<div class="row">
<h3 class="text-primary">
TEST: YouTube API with Bootstrap 3 <button id="btnChangeVid" class="btn btn-sm btn-success pull-right ">
<span class="glyphicon glyphicon-facetime-video"></span> Change Video</button>
</h3>
<p>
How to retrieve images and data from youtube and customize player. TIP: Try pressing "Change Video" button on right.
</p>
<div class="col-md-8 column">
<!-- use this tool for options
https://developers.google.com/youtube/youtube_player_demo
-->
<div class="text-center">
<div id="yt-frame" class="yt-vid">
<div id="alertmess" class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button> <strong>Please wait...</strong>
<p>
This page gets data from youtube api.
</p>
</div>
<div id="yt-spinner"></div>
</div>
<span id="yt-thumbnail1"> ~ loading thumb1</span> <span id="yt-thumbnail2"> ~ loading thumb2</span> <span id="yt-thumbnail3"> ~ loading thumb3</span><br>
</div>
</div>
<div class="col-md-4 column">
<div class="panel panel-primary">
<div class="panel-heading">
TITLE:
<h3 class="panel-title" id="yt-title">
~ loading title
</h3>
<div id="yt-author">
~ loading author
</div>
</div>
<div class="panel-body">
<p class="yt-description"></p>
<div id="yt-thumbnail">
~ loading description
</div>
<hr>
</div>
<div class="panel-footer">
<div id="yt-viewcount">
~ loading views
</div>
<div id="yt-published">
~ loading date
</div>
<div id="yt-duration">
~ loading duration
</div><br>
<div id="yt-link">
~ loading link
</div>
</div>
</div>
</div> <!-- /.col-md-4-->
</div> <!-- /.row -->
<hr>
</div> <!-- /.container-->
.container {
margin-top: 0
}
.pad5 {
padding: 5px
}
.panel-body {
min-height: 300px
}
/*
Reference: http://avexdesigns.com/responsive-youtube-embed/
*/
.yt-vid {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.yt-vid iframe, .yt-vid object, .yt-vid embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#yt-spinner {
color:#999;
margin: 1em;
font-size: 24px;
}
/*!
* YouTube api with Bootstrap 3 v.1 https://github.com/robmccormack/tb-youtube-api
* Copyright 2014 Rob McCormack.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*
http://stackoverflow.com/questions/5194619/getting-youtube-video-information-using-javascript-jquery
*/
$(document).ready(function() {
var id = "vslQm7IYME4";
var t = 0; // time to start in seconds
/*
pass the id and the start time to function
$(function() {
setTimeout("getYouTubeInfo(id, t)", 8000);
});
*/
// pause the script, to allow message to be read
myVar = setTimeout(function() {
getYouTubeInfo(id, t);
}, 5000);
//getYouTubeInfo(id, t);
// $('#alertmess').show().fadeOut(3000);
});
$(function() {
// this is the jQuery function if testButton is clicked
$('#btnChangeVid').click(function() {
var id = "zJahlKPCL9g";
var t = 50; // time to start in seconds
getYouTubeInfo(id, t);
}); // end btn function
}); // end function
function getYouTubeInfo(id, t) {
// enter your YouTube id here:
// test junk ???
// id = "zJahlKPCL9g";
//var id = "vslQm7IYME4";
var url = "http://gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=json";
$.ajax({
url: url,
dataType: "jsonp",
success: function(data) {
parseresults(data)
}
});
// EMBED for iFrame
var frame = '<iframe title="Youtube Video Player" width="640" height="390" src="http://www.youtube.com/embed/' + id + '?fs=1&autoplay=0&loop=0&start= ' + t + '" frameborder="0" allowfullscreen style="border: 1px solid black"></iframe>';
$('#yt-frame').hide().html(frame).fadeIn(3000).delay(200);
}
function parseresults(data) {
var title = data.entry.title.$t;
var link = data.entry.link[0].href;
var description = data.entry.media$group.media$description.$t;
var published = data.entry.published.$t;
/* from JSON file, date format
"published": {
"$t": "2014-02-03T13:46:12.000Z"
*/
// convert the date
var published = new Date(published);
// thumbnail is an array, zero id default
var thumbnail = data.entry.media$group.media$thumbnail[0].url;
// thumbnails available
var thumbnail1 = data.entry.media$group.media$thumbnail[4].url;
var thumbsec1 = data.entry.media$group.media$thumbnail[4].time;
// ??? get this working with thumb and link alert (thumbsec1);
var thumbnail2 = data.entry.media$group.media$thumbnail[5].url;
var thumbnail3 = data.entry.media$group.media$thumbnail[6].url;
var viewcount = data.entry.yt$statistics.viewCount;
var author = data.entry.author[0].name.$t;
//data.entry.media$group.media$description.$t;
var duration = data.entry.media$group.yt$duration.seconds;
// String.prototype at bottom
duration = duration.toHHMMSS();
$('#yt-title').html(title);
// no work fo some reason
$('#yt-link').html('<a href="' + link + '" class="btn btn-danger btn-xs" >view on YouTube</a>');
// can we fade in?
// $('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');
$('.yt-description').hide().html('<b>Description</b>: ' + description).fadeIn(3000);
$('#yt-author').hide().html('<b>Author</b>: ' + author).fadeIn(5000);
$('#yt-published').html('<b>Published</b>: <small> ' + published + '</small>');
$('#yt-viewcount').html('<br/><b>Views</b>: ' + addCommas(viewcount));
$('#yt-thumbnail').hide().html('<img src=" ' + thumbnail + '" alt="">').delay(500).fadeIn(4000);
$('#yt-thumbnail1').hide().html('<img src=" ' + thumbnail1 + '" alt="" class="img-rounded pad5">').fadeIn(2000);
$('#yt-thumbnail2').hide().html('<img src=" ' + thumbnail2 + '" alt="" class="img-rounded pad5">').fadeIn(3000);
$('#yt-thumbnail3').hide().html('<img src=" ' + thumbnail3 + '" alt="" class="img-rounded pad5">').fadeIn(4000);
$('#yt-duration').html('<b>Duration: </b><small>' + duration + '</small>');
}
var spin = "⣾⣽⣻⢿⡿⣟⣯⣷",
title$ = $('#yt-spinner'),
i = 0;
setInterval(function() {
i = i == spin.length - 1 ? 0 : ++i;
title$.text(spin[i]);
}, 300);
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
//http://stackoverflow.com/questions/6312993/javascript-seconds-to-time-with-format-hhmmss
String.prototype.toHHMMSS = function() {
var sec_num = parseInt(this, 10); // don't forget the second parameters
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var time = hours + ':' + minutes + ':' + seconds;
return time;
}
