Skip to content

Instantly share code, notes, and snippets.

@dotStart
Created May 5, 2016 02:00
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save dotStart/969f15988ea0230d78c9ca2a6605add1 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml/">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:700" />
<style typte="text/css">
body {
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', sans-serif;
font-size: 18px;
}
@keyframes message {
0% {
transform: scale(1, 1);
}
100% {
transform: scale(1.5, 1.5);
}
}
#messages {
width: 50vw;
margin: 0 auto;
text-align: center;
}
#video-container {
visibility: hidden;
}
h1 {
animation-name: message;
animation-duration: 175ms;
transform-origin: 50% 50%;
color: #FFFFFF;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
// <![CDATA[
'use strict';
const displayTime = 2000;
const animationTime = 250;
const messages = {
24: "Are you ready?",
63: "Blockbuster!",
66: "Brainpower!",
91: "Brainpower!",
155: "Blockbuster!",
158: "Brainpower!",
184: "Brainpower!"
};
var player;
function onReady(event) {
event.target.setVolume(10);
event.target.playVideo();
}
function onStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.playVideo();
}
}
function onUpdate() {
var index = Math.floor(player.getCurrentTime());
var message = messages[index];
if (message != undefined) {
var header = $('<h1 />').text(message).hide();
$('#messages').append(header);
header.show(animationTime, function() {
window.setTimeout(function() {
header.hide(animationTime, function() {
header.remove();
});
}, displayTime);
});
}
}
function onYouTubeIframeAPIReady() {
$(document).ready(function() {
player = new YT.Player('video-container', {
height: 1,
width: 1,
videoId: '9R8aSKwTEMg',
events: {
'onReady': onReady,
'onStateChange': onStateChange
}
});
window.setInterval(onUpdate, 1000);
});
}
// ]]>
</script>
</head>
<body>
<div id="messages"></div>
<div id="video-container"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment