DEV Community

Cover image for Video Player Interface for Bootstrap 5
Simon Köhler
Simon Köhler

Posted on • Updated on

Video Player Interface for Bootstrap 5

Since I'm currently working on a project that requires a custom video player for Bootstrap, I decided to share the code with everyone.

Yeah, it's Open Source:

If you want to participate on GitHub, let's go:

It's an experimental interface to implement a video player using the Bootstrap 5 framework. The HTML structure was deliberately created so that you can customize the player to your own design using Bootstrap's built-in CSS classes.

  • Bootstrap Version 5.0.2
  • Uses Bootstrap Icons

UPDATE 2021-08-09

The video player now has the main functions needed to play videos, such as play/pause, jump to a specific point in the timeline, adjust volume and enable/disable full screen.

Example HTML Markup for Video Player

<div class="videoplayer" id="myCustomPlayer">
   <div class="ratio ratio-16x9 bg-dark">
      <video class="video" src=""></video>
   <div class="controls">
      <button class="btn btn-lg btn-video-playpause" type="button" title="Play Video">
          <i class="bi bi-play-fill"></i>
          <i class="bi bi-pause-fill d-none"></i>
      <div class="px-1 w-100">
          <div class="progress w-100">
              <div class="progress-bar"></div>
      <button class="btn btn-lg btn-video-pip" title="Play picture in picture">
          <i class="bi bi-pip"></i>
      <button class="btn btn-lg btn-video-fullscreen">
          <i class="bi bi-arrows-fullscreen"></i>
      <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>
          <div class="dropdown-menu dropdown-menu-end dropup-volume">
              <input type="range" class="form-range form-range-volume">
      <div class="dropup">
          <button class="btn btn-lg" data-bs-toggle="dropdown" title="More...">
              <i class="bi bi-three-dots-vertical"></i>
          <div class="dropdown-menu dropdown-menu-end">
              <a class="dropdown-item" href="#">
                  <i class="bi bi-info-circle-fill"></i> About
Enter fullscreen mode Exit fullscreen mode


This article will be updated, as well as the GitHub Page and Repository. Check back soon and please leave a comment! Thanks!

Support my work:

Follow me:

Discussion (0)