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); });
Expand for more options Login