Coding with Rumaysa

Custom Video Controls Demo

* {
 font-family: Arial;
 overflow: hidden;
}

*:focus {
 outline: none;
}

body {
 margin: 0 auto;
 overflow: hidden;
}

video {
 width: 100%;
 height: 560px;
 padding: 0;
 background-color: black;
 margin: 0;
}

.controls {
 position: fixed;
 display: flex;
 bottom: 0;
 right: 0;
 z-index: 1000;
 left: 0;
 top: 490px;
 height: 40px;
}

button {
 background: transparent;
 border: none;
 font-size: 20px;
 color: #a020f0;
}

span {
 margin-top: 9px;
 font-size: 20px;
 color: #a020f0;
}

#progress {
 appearance: none;
 width: 100%;
 height: 5px;
 position: absolute;
 top: 540px;
 left: 1px;
 margin: 0;
 background-color: gray;
}

#progress:hover {
 height: 10px;
}

#volume {
 margin-top: 7px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #progress {
  overflow: hidden;
 }

#progress::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  color: #a020f0;
  width: 2000px;
  margin-top: -1px;
 }

#progress::-webkit-slider-thumb {
  width: 10px;
  -webkit-appearance: none;
  height: 10px;
  background: #a020f0;
  box-shadow: -1000px 0 0 1000px #a020f0;
 }
}

var vid = document.getElementById("vid");
var play_icon = document.getElementById("play_icon");
var pp_button = document.getElementById("pp_button");
var mute_icon = document.getElementById("mute_icon");
var volume_btn = document.getElementById("volume");
var current = document.getElementById("current");
var total = document.getElementById("total");
var progress = document.getElementById("progress");
var fuller = document.getElementById("fuller");
var full_i = document.getElementById("full_i");
var controls = document.querySelector(".controls");

vid.addEventListener("ended", function() {
 play_icon.setAttribute("class","fa fa-play");
 pp_button.setAttribute("onclick","playVid()");
});

vid.addEventListener("loadedmetadata", function() {
 progress.setAttribute("value","0");
 var nt = vid.currentTime * (100 / vid.duration);
 progress.value = nt;
 var durmins = Math.floor(vid.duration / 60);
 var dursecs = Math.floor(vid.duration - durmins * 60);
 if(dursecs < 10) { dursecs = "0"+dursecs; }
 if(durmins < 10) { durmins = "0"+durmins; }
 total.innerHTML = durmins+":"+dursecs;
});

vid.addEventListener("timeupdate", function() {
 var nt = vid.currentTime * (100 / vid.duration);
 progress.value = nt;
 var curmins = Math.floor(vid.currentTime / 60);
 var cursecs = Math.floor(vid.currentTime - curmins * 60);
 var durmins = Math.floor(vid.duration / 60);
 var dursecs = Math.floor(vid.duration - durmins * 60);
 if(cursecs < 10) { cursecs = "0"+cursecs; }
 if(curmins < 10) { curmins = "0"+curmins; }
 if(dursecs < 10) { dursecs = "0"+dursecs; }
 if(durmins < 10) { durmins = "0"+durmins; }
 current.innerHTML = curmins+":"+cursecs;
 total.innerHTML = durmins+":"+dursecs;
});

function seeker() {
 var seekto = vid.duration * (progress.value / 100);
 vid.currentTime = seekto;
}

function playVid() {
 vid.play();
 play_icon.setAttribute("class","fa fa-pause");
 pp_button.setAttribute("onclick","pauseVid()");
}

function pauseVid() {
 vid.pause();
 play_icon.setAttribute("class","fa fa-play");
 pp_button.setAttribute("onclick","playVid()");
}

function muteVid() {
 vid.muted = true;
 mute_icon.setAttribute("class","fa fa-volume-off");
 volume_btn.setAttribute("onclick","unmuteVid()");
}

function unmuteVid() {
 vid.muted = false;
 mute_icon.setAttribute("class","fa fa-volume-up");
 volume_btn.setAttribute("onclick","muteVid()");
}

function fullscreen() {
 vid.style.height = "100vh";
 full_i.setAttribute("class","fa fa-compress");
 fuller.setAttribute("onclick","out()");
 controls.style.top = "690px";
 progress.style.top = "740px";
}

function out() {
 vid.style.height = "560px";
 full_i.setAttribute("class","fa fa-expand");
 fuller.setAttribute("onclick","fullscreen()");
 controls.style.top = "490px";
 progress.style.top = "540px";
}