DEV Community

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

Posted on • Edited on

5 2

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:
https://koehlersimon.github.io/bootstrap-videoplayer/

If you want to participate on GitHub, let's go:
https://github.com/koehlersimon/bootstrap-videoplayer

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="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"></video>
   <div>
   <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>
      </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">
          <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">
              <input type="range" class="form-range form-range-volume">
          </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">
              <a class="dropdown-item" href="#">
                  <i class="bi bi-info-circle-fill"></i> About
              </a>
          </div>
      </div>
   </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Note

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:

https://www.paypal.com/paypalme/typo3freelancer
https://www.patreon.com/koehlersimon

Follow me:

https://github.com/koehlersimon
https://www.linkedin.com/in/typo3-freelancer/
https://bitbucket.org/typo3freelancer/
https://twitter.com/koehlersimon
https://www.instagram.com/fullstackfreelancer/

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (1)

Collapse
 
mrdeveloperdude profile image
Lennart Rolland

Bro, all your github links are dead. This is the top result on google for "bootstrap 5 video player with controls" so better fix that shit xD

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more