The VHS Time Capsule application is nearly complete; we just need to have some kind of popup video player that opens whenever a thumbnail is clicked. Of course, it also has to play the corresponding video. Thankfully, since we’re using videos hosted on YouTube, we only need one set of location strings. It’s just going to be a little tricky to embed them in the format we need.
iteration6.html
<html>
<head>
<script type="text/javascript" src="iteration6.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
body {
overflow: hidden;
}
div.window {
position: absolute;
background-color: black;
left: -427px;
width: 427px;
height: 320px;
display: flex;
justify-content: center;
align-items: center;
}
#viewer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 740px;
height: 580px;
visibility: hidden;
background-color: black;
z-index: 100;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
makebox();
});
</script>
<div id="viewer"></div>
<div class="window"></div>
</body>
</html>
In the HTML file, we’ve added a new stylesheet for a div with the ID “viewer” that will appear in the center of the viewport. The transform: translate(-50%, -50%) parameter centers the div by moving its origin point (the top left corner) upward and leftward by 50% of the element’s height and width, respectively. The z-index defines the “distance off the paper” that the div will be drawn: higher numbers indicate closer to the viewer. At z-index 100, the viewer should appear on top of everything else being drawn. This new viewer div will start hidden and be made visible through JavaScript.
iteration6.js
function makebox() {
$(".window").click(function () {
color = $(this).css("color");
$("#viewer").css({"visibility": "visible", "background-color": color});
video = $(this).css("background-image");
video = video.slice(32, -6);
parent.document.getElementById("viewer").innerHTML=""<img src='close.png' style='position:absolute; right:25px; top: 25px; transform: translate(30%, -25%);' onclick='hideViewer()'><iframe width='640' height='480' style='position:absolute; top:50px; left:50px;' src='https://www.youtube.com/embed/"+video+"?controls=0&autoplay=1&fs=0&modestbranding=1&rel=0' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
});
$(".window:not(:animated)").each(function() {
addy = (Math.floor(Math.random() * addresses.length));
$(this).css({"top": Math.random() * window.innerHeight - 160,"left": "-"+Math.random() * 150 -150+"%","background-image": "url('https://img.youtube.com/vi/"+addresses[addy]+"/0.jpg')", "border": "10px solid", "color": getRandomColor});
$(this).animate({left: "150%"}, Math.random() * 15000 + 15000, makebox);
});
}
function hideViewer() {
$("#viewer").css({"visibility": "hidden"});
parent.document.getElementById("viewer").innerHTML="";
}
Our trusty makebox() function has become quite complicated now, so let’s go over the new additions line-by-line:
$(".window").click(function () { When a div of class “window” is clicked, the embedded function will be invoked as follows:
color = $(this).css("color"); A new variable, color, is defined by the CSS color attribute for the particular div we’re working with. This color attribute will be set by the getRandomColor() function when the div is drawn.
$("#viewer").css({"visibility": "visible", "background-color": color}); This makes the viewer div visible and colors it with the same as the border of the div that was clicked.
video = $(this).css("background-image"); This defines a new variable video and defines it as the URL of the thumbnail populating the div that was clicked.
video = video.slice(32, -6); Redefines video by eliminating the first 32 characters and the last 6 characters of the value defined in the preceding line. This effectively reverts video back to the YouTube location identifier that would be found in the addresses array so that we can use it in the next line.
parent.document.getElementById("viewer").innerHTML="<img
src='close.png' style='position:absolute; right:25px; top: 25px;
transform: translate(30%, -25%);' onclick='hideViewer()'><iframe
width='640' height='480' style='position:absolute; top:50px; left:50px;'
src=’https://www.youtube.com/embed/”+video+”?controls=0&autoplay=1&fs=0&modestbranding=1&rel=0′
title=’YouTube video player’ frameborder=’0′ allow=’accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture’ allowfullscreen></iframe>”;
This injects the defined HTML code between the tags for the “viewer” div. The code here is the boilerplate YouTube iframe embed code with a few optional parameters specified. The HTML also centers the YouTube iframe and renders a close button in the corner of the #viewer div that will run the hideViewer() function when clicked.
The rest of the makebox() function doesn’t change, but we do add a new hideViewer() function to the script.
function hideViewer() {
$("#viewer").css({"visibility": "hidden"});
parent.document.getElementById("viewer").innerHTML="";
}This new function simply hides the viewer div by changing the CSS and stops any video playing by clearing the HTML inside the #viewer div tags.