<div class="video-container">
  <video id="myVideo" src="https://codeshack.io/web/example.mp4" width="640" height="360">
    Your browser does not support the video tag.
  </video>
  <div id="videoControls">
    <button id="playPauseBtn">Play</button>
    <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
    <button id="fullScreenBtn">Fullscreen</button>
  </div>
</div>

.video-container {
  position: relative;
  width: 640px; /* Adjust as needed */
  margin: auto;
}
#videoControls {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
}
#videoControls button, #videoControls input {
  padding: 5px 10px;
  cursor: pointer;
}

const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const volumeSlider = document.getElementById('volumeSlider');
const fullScreenBtn = document.getElementById('fullScreenBtn');

playPauseBtn.addEventListener('click', () => {
  if (video.paused || video.ended) {
    video.play();
    playPauseBtn.textContent = 'Pause';
  } else {
    video.pause();
    playPauseBtn.textContent = 'Play';
  }
});

volumeSlider.addEventListener('input', (e) => {
  video.volume = e.target.value;
});

fullScreenBtn.addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) { /* Firefox */
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { /* IE/Edge */
    video.msRequestFullscreen();
  }
});

video.addEventListener('play', () => playPauseBtn.textContent = 'Pause');
video.addEventListener('pause', () => playPauseBtn.textContent = 'Play');

Back to Snippets

HTML5 Video Player with Custom Controls

Embed a video using the HTML5 <video> tag and create custom player controls (play/pause, volume, fullscreen) using JavaScript for a unique viewing experience.

#html5

#video

#custom controls

#javascript

#media player

#multimedia

/HTML *CSS ()JS Output Live Updates

const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const volumeSlider = document.getElementById('volumeSlider');
const fullScreenBtn = document.getElementById('fullScreenBtn');

playPauseBtn.addEventListener('click', () => {
  if (video.paused || video.ended) {
    video.play();
    playPauseBtn.textContent = 'Pause';
  } else {
    video.pause();
    playPauseBtn.textContent = 'Play';
  }
});

volumeSlider.addEventListener('input', (e) => {
  video.volume = e.target.value;
});

fullScreenBtn.addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) { /* Firefox */
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { /* IE/Edge */
    video.msRequestFullscreen();
  }
});

video.addEventListener('play', () => playPauseBtn.textContent = 'Pause');
video.addEventListener('pause', () => playPauseBtn.textContent = 'Play');