Can I use "Custom Video Player with pure CSS and JavaScript [Source…" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Custom Video Player with pure CSS and JavaScript [Source… — Free Utilities Snippet (Bootstrap 5)

Loading…

Custom Video Player with pure CSS and JavaScript [Source… — Free Utilities Snippet (Bootstrap 5) | GoSnippets

Source Code

1    <!-- These 3 links are only for icons -->
2    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
3    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
4    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
5  
6    <div class="container show-controls">
7        <div class="wrapper">
8            <div class="video-timeline">
9                <div class="progress-area">
10                    <span>00:00</span>
11                    <div class="progress-bar"></div>
12                </div>
13            </div>
14            <ul class="video-controls">
15                <li class="options left">
16                    <button class="volume"><i class="fa-solid fa-volume-high"></i></button>
17                    <input type="range" min="0" max="1" step="any">
18                    <div class="video-timer">
19                        <p class="current-time">00:00</p>
20                        <p class="separator"> / </p>
21                        <p class="video-duration">00:00</p>
22                    </div>
23                </li>
24                <li class="options center">
25                    <button class="skip-backward"><i class="fas fa-backward"></i></button>
26                    <button class="play-pause"><i class="fas fa-play"></i></button>
27                    <button class="skip-forward"><i class="fas fa-forward"></i></button>
28                </li>
29                <li class="options right">
30                    <div class="playback-content">
31                        <button class="playback-speed"><span class="material-symbols-rounded">slow_motion_video</span></button>
32                        <ul class="speed-options">
33                            <li data-speed="2">2x</li>
34                            <li data-speed="1.5">1.5x</li>
35                            <li data-speed="1" class="active">Normal</li>
36                            <li data-speed="0.75">0.75x</li>
37                            <li data-speed="0.5">0.5x</li>
38                        </ul>
39                    </div>
40                    <button class="pic-in-pic"><span class="material-icons">picture_in_picture_alt</span></button>
41                    <button class="fullscreen"><i class="fa-solid fa-expand"></i></button>
42                </li>
43            </ul>
44        </div>
45        <video src="https://gosnippets.com/blog/wp-content/uploads/2021/12/Voice-enabled-UI.mp4?_=1"></video>
46    </div>

Custom Video Player with pure CSS and JavaScript [Source…

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection

Custom Video Player with pure CSS and JavaScript [Source…

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities snippets

Working in Tailwind? Explore our Tailwind gallery

Trending Bootstrap snippets

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection