DEV Community

Cover image for Custom Video Player Design using HTML, CSS and Javascript
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

Custom Video Player Design using HTML, CSS and Javascript

#javascript #html #css #incoder

Hello friends, today in this blog you'll learn how to create a custom video player using HTML, CSS, and Javascript. In our previous blog, we saw how to create a responsive sidebar menu design using HTML, CSS, and Javascript. Now it's time to create a custom responsive video player. I've also shared many projects related to Javascript. So don't forget to check here.

An HTML5 video player is an element in HTML that can be used to stream video. It depends on the browser which video it supports. You can use this <video> tag to add any video in your HTML document.

You may like these:-

  • Cookie Consent Box Design
  • Responsive Accordion Design
  • Animated Product Preview Card Design
  • Custom Context or Right Click Menu Design

In this design [Custom Video Player] we have a video player in the middle of the page. when you hover on the video box, all controls will be shown with a smooth transition. On the top, it has a video time range with blue color and on the left bottom it has a volume range selector and in the center, it has video current duration and then play/pause and forward/backward buttons, and last but not the least fullscreen button.

Preview is available here.

HTML Code 

<!-- -------------- Created By InCoder -------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Vider Player - InCoder</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>
    <section>
        <div class="container">
            <div class="videoPlayer">
                <video src="https://doc-14-bk-docs.googleusercontent.com/docs/securesc/thiiuu0bci69ovl24g7628l8rt9f2fip/jo1c4d45uhe38r0cigteg5ooe6sba8m8/1647950250000/11303850701216825521/11303850701216825521/1UFNXxGajYvKrtcskaIuiZmzlbsRyAf9Q?e=view&ax=ACxEAsbRu5GA16JdqvuaJ2TqCy01HzF0pD8gyJ5ehwPUhDn5YnKbVgCNWDh0IHS3MhddYeVaqgJnMldH7k82AMOKLBoVfMYy3uQs2Wf9zCoD8QX9eWEZ4GM6yzTWjh3iv7D-zOZ5FX8AgRi0Svz3gnNHoCDEHZQDbL7yBoL8Zw60dUGgUSqpzg2IaqvfYS2EUxByq9KjCxXMXkCoeyi1aYA_WSdfmuInzxoPBYEUE6e3FKDITYLJfNDc8KWwzvpIp8qatTz0SwlamG5zPXh1CtcHOJ8Gh8OmBoV0RDD79IOi8cSetKlQiYzzPtYDTTbdWI6XPsUGeouO_koIZSVRGIe6NbzB0_hjC_uYLN_YCwnvVuJQsfSRu78AJGQzlYN6lXdaTGebzli9CsBN3mRKg7_lnNnXXDi1l7dH-zTqLzEzU3tqypLn29QevN7xsQqyzij2DiR955JJWuBOQ0nFRKBzKBecedu03fdJI7sP3yGK9g5E7DWOn9iZjyXWhELD0MuLGu9V9ksG3mCLyfxhfYibFKHB2YS_ts42SVePVw69EPHw_j0iGPVGCDNXnoC7J_mjqnPzFmWV5IfS8fQSPlwSK8xQTOYi52E8rPm4LOWnClcAFsdXrqs10yn0W9V6tQmBI1n--W34RDvbpXl-eQJUups-AiNd_cqZu1D4Cs73diziO2_zNmAdZKu8Fj-itYIipcsW7fvX4HtevQ&authuser=0&nonce=92kkcvff689ba&user=11303850701216825521&hash=g8nngkjiue6rjvc70qkjtmof3152cvg4"></video>
                <div class="videoProgressBar">
                    <div class="videoProgressDuration"></div>
                    <div class="dot"></div>
                </div>
                <div class="controls">
                    <div class="leftControls">
                        <div class="volume">
                            <i class="fa-solid fa-volume-high"></i>
                            <input type="range" value="100">
                        </div>
                    </div>
                    <div class="centerControls">
                        <div class="currentVideoDuration">
                            <p>00:00</p>
                        </div>

                        <div class="reverseVideo">
                            <i class="fa-solid fa-backward"></i>
                        </div>

                        <div class="playPauseBtn">
                            <i class="fa-solid fa-play playBtn"></i>
                            <i class="fa-solid fa-pause hide pauseBtn"></i>
                        </div>

                        <div class="forwardVideo">
                            <i class="fa-solid fa-forward"></i>
                        </div>

                        <div class="totalVideoDuration">
                            <p></p>
                        </div>
                    </div>
                    <div class="rightControls">
                        <div class="fullScrean">
                            <i class="fa-solid fa-expand"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="script.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code 

/* -------------- Created By InCoder -------------- */

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgba(0, 0, 0, 0.06);
}

section {
  width: 100%;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.container .videoPlayer {
  height: 100%;
  display: flex;
  max-width: 700px;
  margin: 0px 10px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
  border-radius: 0.3rem;
  justify-content: center;
}

.container .videoPlayer.active {
  box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.06);
}

.container .videoPlayer video {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 0.3rem;
}

.controls {
  bottom: 0%;
  opacity: 0;
  height: 3rem;
  color: #fff;
  display: flex;
  min-width: 100%;
  max-width: 100%;
  position: relative;
  position: absolute;
  align-items: center;
  transition: all 0.2s;
  transform: translateY(5rem);
  justify-content: space-between;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 80%);
}

.videoPlayer.active .controls {
  opacity: 1;
  transform: translateY(0rem);
}

.videoPlayer .videoProgressBar {
  width: 94%;
  opacity: 0;
  bottom: 13%;
  display: flex;
  height: 0.3rem;
  cursor: pointer;
  border-radius: 5px;
  position: absolute;
  align-items: center;
  transition: all 0.2s;
  background-color: rgba(255, 255, 255, 0.7);
  transform: translateY(5rem);
}

.videoPlayer.active .videoProgressBar {
  opacity: 1;
  transition: all 0.2s;
  transform: translateY(0rem);
}

.videoPlayer .videoProgressBar.active,
.videoPlayer .videoProgressBar.active .videoProgressDuration {
  height: 0.4rem;
}

.videoPlayer .videoProgressBar .dot {
  left: 0%;
  width: 1.1rem;
  height: 1.1rem;
  max-width: 100%;
  position: absolute;
  border-radius: 50%;
  cursor: context-menu;
  background-color: #3968bf;
}

.videoPlayer .videoProgressBar .videoProgressDuration {
  width: 0%;
  height: 0.3rem;
  max-width: 100%;
  position: absolute;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: #3968bf;
}

.videoPlayer .controls i {
  color: #fff;
}

.leftControls,
.centerControls,
.rightControls {
  display: flex;
}

.controls .centerControls{
    margin-left: -2rem;
}

.controls .leftControls .volume {
  display: flex;
  font-size: 1rem;
  margin-left: 3rem;
  align-items: center;
  justify-content: center;
}

.controls .leftControls .volume i {
  cursor: pointer;
}

.controls .leftControls .volume input[type="range"] {
  width: 80%;
  height: 0.3rem;
  cursor: pointer;
  appearance: none;
  overflow: hidden;
  margin-left: 0.4rem;
  transition: all 0.2s;
  border-radius: 0.5rem;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.7);
}

.controls .leftControls .volume input[type="range"]:hover {
  height: 0.6rem;
}

.controls .leftControls .volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 40px;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: -100vw 0 0 100vw #3968bf;
  border: 2px solid #999;
}

.controls
  .leftControls
  .volume
  input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  color: #13bba4;
}

.controls .rightControls {
  margin-right: 2.5rem;
}

.controls .rightControls i {
  cursor: pointer;
  color: #fff;  
}

.controls .rightControls div {
  margin-left: 1rem;
}

.centerControls div{
    cursor: pointer;
    margin-left: .5rem;
    margin-right: .5rem;
}

.centerControls div:first-child{
    cursor: auto;
    margin-left: 0rem;
}

.centerControls div:last-child{
    cursor: auto;
    margin-right: 0rem;
}

.hide{
    display: none!important;
}

@media(max-width: 768px) {
    .leftControls{
        margin-left: -1.5rem!important;
    }

    .leftControls .volume{
        margin-right: 2.5rem;
    }

    .leftControls .volume input{
        display: none;
    }

    .centerControls{
    }

    .rightControls{
        margin-right: 1rem!important;
    }
}
Enter fullscreen mode Exit fullscreen mode

Javascript Code 

let video = document.querySelector('.videoPlayer video')
videoPlayer = document.querySelector('.videoPlayer')
videoProgressBar = document.querySelector('.videoProgressBar')
videoProgressDuration = document.querySelector('.videoProgressDuration')
dot = document.querySelector('.videoProgressBar .dot')
volume = document.querySelector('.leftControls .volume input[type=range]')
volIcon = document.querySelector('.leftControls .volume i')
fullScrean = document.querySelector('.fullScrean')
currentVideoDuration = document.querySelector('.currentVideoDuration p')
totalVideoDuration = document.querySelector('.totalVideoDuration p')
playBtn = document.querySelector('.playBtn')
pauseBtn = document.querySelector('.pauseBtn')
forwardVideo = document.querySelector('.forwardVideo')
reverseVideo = document.querySelector('.reverseVideo');

videoPlayer.addEventListener('mousemove', function () {
    this.classList.add('active');
});

videoPlayer.addEventListener('mousemove', function () {
    this.classList.add('active');
});

videoPlayer.addEventListener('mouseleave', function () {
    this.classList.remove('active');
});

video.addEventListener('timeupdate', function (e) {
    let videoPosition = video.currentTime / video.duration;
    dot.style.left = (videoPosition * 100) + '%';
    videoProgressDuration.style.width = (videoPosition * 100) + '%';
});

const i = setInterval(function() {
    if(video.readyState > 0) {
        var minutes = parseInt(video.duration / 60, 10);
        var seconds = Math.round(video.duration % 60);

        totalVideoDuration.innerText = minutes + ":" + seconds;
        clearInterval(i);
  }
}, 10);


videoProgressBar.addEventListener('click', function (e) {
    let videoDuration = video.duration;
    let progressWidthValue = this.clientWidth;
    let clickOffestX = e.offsetX;

    video.currentTime = (clickOffestX / progressWidthValue) * videoDuration;
});

fullScrean.addEventListener('click', function() {
    video.requestFullscreen();
});

video.addEventListener('timeupdate', function(e){
    let currentVideoTime = e.target.currentTime;
    let currentMin = Math.floor(currentVideoTime / 60);
    let currentSec = Math.floor(currentVideoTime % 60);

    currentMin < 10 ? currentMin = '0'+currentMin : currentMin;
    currentSec < 10 ? currentSec = '0'+currentSec : currentSec;
    currentVideoDuration.innerHTML = `${currentMin}:${currentSec}`
});

playBtn.addEventListener('click', function(){
    this.classList.toggle('hide');
    pauseBtn.classList.toggle('hide');
    video.play();
});

pauseBtn.addEventListener('click', function(){
    this.classList.toggle('hide');
    playBtn.classList.toggle('hide');
    video.pause();
});

reverseVideo.addEventListener('click', function(){
    video.currentTime -= 10;
});

forwardVideo.addEventListener('click', function(){
    video.currentTime += 10;
});

volume.addEventListener('change', function(){
    if(this.value < 20){
        volIcon.classList.remove('fa-volume-high');
        volIcon.classList.add('fa-volume-low');
    }else if(this.value > 20){
        volIcon.classList.remove('fa-volume-low');
        volIcon.classList.remove('fa-volume-xmark');
        volIcon.classList.add('fa-volume-high');
    }else if (this.value == 0){
        volIcon.classList.remove('fa-volume-low');
        volIcon.classList.add('fa-volume-xmark');
    }
    video.volume = this.value / 100;
});

document.querySelector('.fa-volume-high').addEventListener('click', function(){
    volIcon.classList.toggle('fa-volume-high');
    volIcon.classList.toggle('fa-volume-xmark');
    video.volume = 0;
});

volIcon.addEventListener('click', function(){
    volIcon.classList.toggle('fa-volume-xmark');
    volIcon.classList.toggle('fa-volume-high');
    video.volume = 1;
});

video.addEventListener('ended', function(){
    pauseBtn.classList.toggle('hide');
    playBtn.classList.toggle('hide');

    setTimeout(function(){
        video.currentTime = 0;
    }, 800);
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

rigalpatel001 profile image

Mastering Advanced Error Handling in Express.js for Robust Node.js Applications

Rigal Patel -

hasan_py profile image

Learn Playwright Automation | E2E Test | Typescript | Auth, Maps, CRUD, GitHub Actions

Hasan -

leemeganj profile image

Master JavaScript date and time: From Moment.js to Temporal

Megan Lee -

tsudhishnair profile image

Building deep-links in Electron application

T Sudhish Nair -