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.

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>

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;
    }
}

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);
});

DEV Community

Custom Video Player Design using HTML, CSS and Javascript

You may like these:-

HTML Code

CSS Code

Javascript Code

Top comments (0)

Read next

Components in React

How to Unsave All Saved Posts on Facebook in a Few Simple Steps

How to use Cookie Consent in a React App with react-cookie-consent

🚀 React Native's New Architecture Brings 550% Speed Boost