Bootstrap Snippet Control Youtube Videos with Javascript using HTML CSS Javascript

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="//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;
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
*{
    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;
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
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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Control Youtube Videos with Javascript"
Bootstrap 3.3.0 Snippet by Xevion

Related: See More

Questions / Comments:

"Control Youtube Videos with Javascript" Bootstrap 3.3.0 Snippet by Xevion

Related: See More

Questions / Comments:

"Control Youtube Videos with Javascript"
Bootstrap 3.3.0 Snippet by Xevion