Bootstrap Snippet TEST: YouTube API with Bootstrap 3 using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!
 * 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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"TEST: YouTube API with Bootstrap 3"
Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: YouTube API with Bootstrap 3" Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: YouTube API with Bootstrap 3"
Bootstrap 3.1.0 Snippet by mrmccormack