Skip to content

Commit 438d213

Browse files
dev-shettydev-shetty
committed
ADD: Video Player
1 parent 661cb66 commit 438d213

File tree

3 files changed

+169
-0
lines changed

3 files changed

+169
-0
lines changed

‎Video Player/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css"
10+
/>
11+
<link rel="stylesheet" href="style.css" />
12+
<title>Video Player</title>
13+
</head>
14+
<body>
15+
<main>
16+
<div class="screen">
17+
<img
18+
src="https://source.unsplash.com/random?nature"
19+
alt="Marvel Movie"
20+
/>
21+
</div>
22+
<div class="control">
23+
<div class="media-control">
24+
<i class="ti ti-player-track-prev-filled" title="previous"></i>
25+
<i
26+
class="ti ti-player-play-filled"
27+
title="play/pause"
28+
data-play-pause
29+
></i>
30+
<i class="ti ti-player-track-next-filled" title="next"></i>
31+
<i class="ti ti-player-stop-filled" title="stop"></i>
32+
<i class="ti ti-menu-2" title="menu"></i>
33+
</div>
34+
<div class="timer-control">
35+
<input type="range" name="player" id="player" />
36+
<p class="timer">45:25:12</p>
37+
</div>
38+
<div class="volume-control">
39+
<div>
40+
<i class="ti ti-volume-2"></i>
41+
<input type="range" name="volume" id="volume" />
42+
<i class="ti ti-volume"></i>
43+
</div>
44+
<div>
45+
<i class="ti ti-arrows-diagonal-2" title="expand" data-expand></i>
46+
</div>
47+
</div>
48+
</div>
49+
</main>
50+
</body>
51+
<script src="./script.js"></script>
52+
</html>

‎Video Player/script.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const play = document.querySelector("[data-play-pause]")
2+
3+
play.onclick = () => {
4+
if (play.classList.contains("ti-player-play-filled")) {
5+
play.classList.remove("ti-player-play-filled")
6+
play.classList.add("ti-player-pause-filled")
7+
} else {
8+
play.classList.remove("ti-player-pause-filled")
9+
play.classList.add("ti-player-play-filled")
10+
}
11+
}

‎Video Player/style.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html {
8+
height: 100%;
9+
}
10+
11+
body {
12+
padding: 2rem;
13+
min-height: 100%;
14+
background-color: #f3f3f7;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
main {
21+
--radius: 1rem;
22+
width: min(80%, 50rem);
23+
border-radius: var(--radius);
24+
}
25+
26+
.screen {
27+
width: 100%;
28+
aspect-ratio: 16 / 9;
29+
background-color: white;
30+
border-radius: var(--radius) var(--radius) 0 0;
31+
position: relative;
32+
z-index: 1;
33+
}
34+
35+
.screen > img {
36+
border-radius: inherit;
37+
max-width: 100%;
38+
object-fit: cover;
39+
aspect-ratio: inherit;
40+
display: block;
41+
}
42+
43+
.control {
44+
--gap: clamp(1rem, 2vw, 2rem);
45+
46+
width: 100%;
47+
height: clamp(1rem, 10vw, 3rem);
48+
display: flex;
49+
align-items: center;
50+
gap: var(--gap);
51+
justify-content: center;
52+
background-color: #fff;
53+
font-size: clamp(0.75rem, 5vw, 1.25rem);
54+
border-radius: 0 0 var(--radius) var(--radius);
55+
56+
transition: transform 500ms ease-in-out;
57+
}
58+
59+
.control.toggle {
60+
transform: translateY(-50%);
61+
}
62+
63+
#player {
64+
width: 12rem;
65+
}
66+
67+
:has(.control.toggle) .screen i[data-contract] {
68+
display: none;
69+
}
70+
71+
/* Only icons with title with have this indicating they are clickable */
72+
.control i[title] {
73+
cursor: pointer;
74+
}
75+
76+
.control > div {
77+
display: flex;
78+
align-items: center;
79+
gap: calc(var(--gap) / 2);
80+
}
81+
82+
.control > div > .timer {
83+
font-size: 1rem;
84+
}
85+
86+
@media screen and (max-width: 50em) {
87+
.control {
88+
flex-direction: column;
89+
height: auto;
90+
padding: 1rem;
91+
}
92+
.control > div {
93+
gap: var(--gap);
94+
width: 100%;
95+
}
96+
.media-control {
97+
justify-content: center;
98+
}
99+
#player {
100+
flex-basis: 100%;
101+
}
102+
.volume-control,
103+
.timer-control {
104+
justify-content: space-between;
105+
}
106+
}

0 commit comments

Comments
 (0)