Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<html>
<head>
<title>JS Example 4</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: Helvetica;
}
/*BUTTON STYLING*/
.buttonContainer{
position: fixed;
margin-left: 20px;
z-index: 100px;
}
.button{
color: black;
border-style: solid;
border-width: 4px;
border-color: black;
width: 60px;
text-align: center;
padding: 10px;
margin: 10px;
}
.button:hover{
background-color: rgb(195,135,0);
}
/*VIDEO STYLING*/
.videoContainer{
clear: left;
margin-top: 40px;
width: 100%;
}
#videoTitle{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-size: 24px;
}
#video{
margin: auto;
width: 640px;
}
#videoDescription{
margin-top: 20px;
text-align: center;
font-size: 16px;
}
</style>
<script type="text/javascript">
var videos = [
{
title: "How To Make A Cappucino",
iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/2Ao5b6uqI40?rel=0" frameborder="0" allowfullscreen></iframe>',
description: "This is the first of 3 videos. It's teaches you how to make a cappucino!"
},
{
title: "How To Make A Mocha",
iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/aEHBmi1927g?rel=0" frameborder="0" allowfullscreen></iframe>',
description: "This is the second of 3 videos. It's teaches you how to make a mocha!"
},
{
title: "How To Make A Macchiato",
iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/pPxWxY7kXG4?rel=0" frameborder="0" allowfullscreen></iframe>',
description: "This is the last of 3 videos. It's teaches you how to make a macchiato!"
}
];
$( document ).ready( function(){
$('#buttonOne').click(function(){
console.log("We clicked Button One!");
$('#videoTitle').html(videos[0].title);
$('#video').html(videos[0].iframe);
$('#videoDescription').html(videos[0].description);
});
$('#buttonTwo').click(function(){
console.log("We clicked Button Two!");
$('#videoTitle').html(videos[1].title);
$('#video').html(videos[1].iframe);
$('#videoDescription').html(videos[1].description);
});
$('#buttonThree').click(function(){
console.log("We clicked Button Three!");
$('#videoTitle').html(videos[2].title);
$('#video').html(videos[2].iframe);
$('#videoDescription').html(videos[2].description);
});
});
</script>
</head>
<body>
<div class="buttonContainer">
<div class="button" id="buttonOne">Video 1</div>
<div class="button" id="buttonTwo">Video 2</div>
<div class="button" id="buttonThree">Video 3</div>
</div>
<div class="videoContainer">
<div id="videoTitle">Select A Video To Learn About Coffee...</div>
<div id="video"></div>
<div id="videoDescription"></div>
<div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment