Video Players – 8 Free CSS, Bootstrap & Tailwind Sets
Video Players is a pack of eight sets of custom HTML video players, designed and maintained in-house by uiCookies. Every player drives a native video element with real buttons and range inputs and a few lines of vanilla JavaScript, and every set comes in three versions that look the same: plain CSS, Bootstrap 5 on top of .btn, .form-range, .card, .list-group and .ratio, and Tailwind CSS 4. The sets run from full control bars and minimal overlay players to chapters and an interactive transcript, course playlists, video cards that open a dialog lightbox, background video heroes with a pause button, a dark streaming-style player and a set built on container queries and :has(). The demos play original short films and soundtracks generated for the pack, with WebVTT captions and chapters.
A good video player keeps the browser in charge of the video and only replaces the controls. The video element should keep its controls attribute in the markup, so the native player still works if the script fails, and captions should come from a WebVTT track that is on by default and printed where the control bar cannot cover it. Play is a button whose label says what it will do next, the seek bar is a range input that reports its position as text such as 1:05 of 2:30, and shortcuts such as Space, K, the arrow keys, M and F should work only while the player has focus, never for the whole page. Nothing should start with sound on its own, a background loop needs a visible pause button, and controls that fade during playback must come back the moment a keyboard user tabs into them.
