Digital Clock with Video Background
HTML
<section class="bg-video">
<div class="inner">
<div class="clock">
<h1 class="hour"></h1>
<h1>:</h1>
<h1 class="minutes"></h1>
<h1>:</h1>
<h1 class="seconds"></h1>
<h2 class="time-of-day"></h2>
</div>
</div>
<div id="video-viewport">
<video width="1920" height="1280" autoplay muted loop>
<source src="https://static.videezy.com/system/resources/previews/000/002/647/original/KLCC-timelapse.mp4" type="video/mp4" />
</video>
</div>
</section>
CSS
* {
box-sizing: border-box;
}
html {
background: #222;
color: #fff;
text-align: center;
height: 100%;
width: 100%;
font-family: 'Oswald', sans-serif;
overflow: hidden;
}
body {
height: 100%;
width: 100%;
}
#video-viewport {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
video {
display: block;
width: 100%;
height: 100%;
}
.bg-video {
height: 100%;
overflow: hidden;
}
.bg-video:before {
content: "";
background: rgba(0,45,114,.35);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.bg-video:after {
content: "";
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI4RkZBQTgzNzg1NzExRTU4NTQyODc3OUM4MTZGMUREIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI4RkZBQTg0Nzg1NzExRTU4NTQyODc3OUM4MTZGMUREIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjhGRkFBODE3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjhGRkFBODI3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66uHInAAAAIUlEQVR42mL5//8/AyMj42YGIGBigABfEMEIkoEBgAADAKvuBwVS8BAjAAAAAElFTkSuQmCC);
background-size: 3px 3px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-video .inner {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
text-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.clock {
text-align: center;
border: 4px solid #fff;
height: 100px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
display: inline-block;
font-size: 3em;
letter-spacing: 4px;
text-transform: uppercase;
margin: 0 4px;
}
h2 {
display: inline-block;
margin-left: 10px;
}
JAVASCRIPT
function updateClock () {
var currentTime = new Date();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
$(".hour").html(currentHours);
$(".minutes").html(currentMinutes);
$(".seconds").html(currentSeconds);
$(".time-of-day").html(timeOfDay);
}
$(document).ready(function() {
setInterval('updateClock()', 1000);
});
