Custom HTML5 Video Player For Bootstrap 5

Preview:

Description:

A custom HTML5 video player that is easy to customize and style using Bootstrap 5 CSS utility classes.

How to use it:

1. Load the needed Bootstrap 5 framework and Bootstrap Icons in the document.

<link href="/path/to/cdn/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Load the Bootstrap 5 video player’s JavaScript and CSS files in the document.

<link rel="stylesheet" href="dist/css/videoplayer.min.css" />
<script src="dist/js/videoplayer.min.js"></script>

3. Embed an HTML5 video into the document and wrap it together with custom video controls into a container element with the CSS class of ‘videoplayer.

<div class="videoplayer" id="myPlayer">
  <div class="ratio ratio-21x9 bg-dark">
    <video class="video" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4#t=9"></video>
  </div>
  <div class="controls controls-dark">
    <button class="btn btn-lg btn-video-playpause" data-bs-toggle="tooltip" title="Play Video" type="button"><i class="bi bi-play-fill"></i><i class="bi bi-pause-fill d-none"></i></button>
    <div class="px-1 w-100">
      <div class="progress w-100">
        <div class="progress-bar"></div>
      </div>
    </div>
    <button class="btn btn-lg btn-video-pip" title="Play picture in picture"><i class="bi bi-pip"></i></button><button class="btn btn-lg btn-video-fullscreen" title="Full Screen"><i class="bi bi-arrows-fullscreen"></i></button>
    <div class="dropup">
      <button class="btn btn-lg btn-video-volume" data-bs-toggle="dropdown" title="Volume"><i class="bi bi-volume-mute-fill"></i></button>
      <div class="dropdown-menu dropdown-menu-end dropup-volume dropdown-menu-dark">
        <input class="form-range form-range-volume" type="range">
      </div>
    </div>
    <div class="dropup">
      <button class="btn btn-lg" data-bs-toggle="dropdown" title="More..."><i class="bi bi-three-dots-vertical"></i></button>
      <div class="dropdown-menu dropdown-menu-end dropdown-menu-dark">
        <a class="dropdown-item" href="#"><i class="bi bi-info-circle-fill"></i> About</a>
      </div>
    </div>
  </div>
  <div class="overlay">
    <div class="title">
      Video Title
    </div>
  </div>
</div>

4. Initialize the custom HTML5 video and done.

document.addEventListener('DOMContentLoaded', () => {
  var myPlayer = new BootstrapVideoplayer('myPlayer',{
      selectors:{
        video: '.video'
      }
  })
})

5. Customize the video controls by overriding the following CSS classes.

document.addEventListener('DOMContentLoaded', () => {
  var myPlayer = new BootstrapVideoplayer('myPlayer',{
      selectors:{
        video: '.video',
        playPauseButton: '.btn-video-playpause',
        playIcon: '.bi-play-fill',
        pauseIcon: '.bi-pause-fill',
        progress: '.progress',
        progressbar: '.progress-bar',
        pipButton: '.btn-video-pip',
        fullscreenButton: '.btn-video-fullscreen',
        volumeRange: '.form-range-volume'
      }
  })
})

6. To auto-hide the video controls on mouse out, just add the CSS class ‘auto-hide’ to the control container.

<div class="controls controls-dark auto-hide">
  ...
</div>