Create a Complete HTML Video Player with CSS (Step-by-Step)

The default HTML <video> player works well, but sometimes you want a custom player with your own design. In this tutorial, we will build a modern video player using HTML, CSS, and a little JavaScript.

---

💡 Features of This Video Player

• Custom Play & Pause button
• Progress bar showing playback position
• Time display
• Modern clean UI
• No external libraries

---

📌 Step 1: HTML Structure

First, create the HTML layout for the player.

<div class="video-container">
  <video id="video" src="video.mp4"></video>

  <div class="controls">
    <button id="playBtn">Play</button>
    <div class="progress">
      <div id="progressBar"></div>
    </div>
    <span id="time">00:00 / 00:00</span>
  </div>
</div>

---

🎨 Step 2: CSS Styling

Add the following CSS to style the player:

<style>
body{
  background:#f7f9ff;
  font-family:Inter, Arial;
  padding:20px;
}

.video-container{
  width:650px;
  max-width:100%;
  margin:auto;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  position:relative;
}

video{
  width:100%;
  display:block;
}

.controls{
  background:#111827;
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.controls button{
  background:#16a34a;
  color:#fff;
  border:none;
  padding:6px 14px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}

.controls button:hover{
  background:#15803d;
}

.progress{
  flex:1;
  height:8px;
  background:#374151;
  border-radius:6px;
  position:relative;
  cursor:pointer;
}

#progressBar{
  width:0%;
  height:100%;
  background:#22d3ee;
  border-radius:6px;
}

#time{
  color:#e5e7eb;
  font-size:13px;
}
</style>

---

⚙ Step 3: JavaScript Functionality

Now, add the logic for play, pause, progress bar update, and duration tracking.

<script>

const video = document.getElementById("video");
const playBtn = document.getElementById("playBtn");
const progressBar = document.getElementById("progressBar");
const timeText = document.getElementById("time");
const progressContainer = document.querySelector(".progress");

// Toggle play / pause
playBtn.addEventListener("click", () => {
  if(video.paused){
    video.play();
    playBtn.textContent = "Pause";
  } else {
    video.pause();
    playBtn.textContent = "Play";
  }
});

// Update progress bar
video.addEventListener("timeupdate", () => {
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.style.width = percent + "%";

  // Update time display
  timeText.textContent = 
    formatTime(video.currentTime) + " / " + 
    formatTime(video.duration);
});

// Seek by clicking on progress bar
progressContainer.addEventListener("click", (e) => {
  const rect = progressContainer.getBoundingClientRect();
  const clickX = e.clientX - rect.left;
  const width = rect.width;

  video.currentTime = (clickX / width) * video.duration;
});

// Format time
function formatTime(sec){
  if(isNaN(sec)) return "00:00";
  
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  
  return String(m).padStart(2,"0") + ":" + String(s).padStart(2,"0");
}

</script>

---

📂 Folder Structure

index.html
video.mp4

---

📌 Result

You now have a modern video player with:

• Custom play button
• Interactive progress bar
• Dynamic time display
• Clean and professional design

---

🎯 Challenge

Try adding more features:

• Volume control
• Full-screen toggle
• Playback speed (1x / 2x)
• Dark & light themes

We will create these in future tutorials.