Skip to content

Commit 8f70e3a

Browse files
BhalliBhaiBhalliBhai
committed
Video Trailer POPUP
1 parent 93a5ab4 commit 8f70e3a

File tree

6 files changed

+121
-0
lines changed

6 files changed

+121
-0
lines changed

‎18. Video Trailer Popup/app.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const btn = document.querySelector(".btn");
2+
const closeIcon = document.querySelector(".close-icon");
3+
const trailerContainer = document.querySelector(".trailer-container");
4+
const video = document.querySelector("video");
5+
6+
btn.addEventListener("click", () => {
7+
trailerContainer.classList.remove("active");
8+
});
9+
10+
closeIcon.addEventListener("click", () => {
11+
trailerContainer.classList.add("active");
12+
video.pause();
13+
video.currentTime = 0;
14+
});

‎18. Video Trailer Popup/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Move Trailer</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="image-container">
11+
<img src="play.png" class="btn" />
12+
</div>
13+
14+
<div class="trailer-container active">
15+
<video src="trailer.mp4" controls></video>
16+
<p class="close-icon">X</p>
17+
</div>
18+
19+
<script src="app.js"></script>
20+
</body>
21+
</html>

‎18. Video Trailer Popup/play.png‎

4.14 KB
Loading

‎18. Video Trailer Popup/style.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.image-container {
8+
background: url(thumb-1920-597965.jpg);
9+
height: 100vh;
10+
background-position: top;
11+
background-repeat: no-repeat;
12+
background-size: cover;
13+
position: relative;
14+
}
15+
16+
img {
17+
position: absolute;
18+
bottom: 20px;
19+
right: 50px;
20+
width: 100px;
21+
cursor: pointer;
22+
animation-name: bounce;
23+
animation-duration: 1s;
24+
animation-timing-function: ease-in;
25+
animation-iteration-count: infinite;
26+
}
27+
28+
@keyframes bounce {
29+
0% {
30+
transform: translateY(0);
31+
animation-timing-function: ease-out;
32+
}
33+
50% {
34+
transform: translateY(-20px);
35+
animation-timing-function: ease-in;
36+
}
37+
100% {
38+
transform: translateY(0);
39+
animation-timing-function: ease-out;
40+
}
41+
}
42+
43+
.trailer-container {
44+
position: fixed;
45+
top: 50%;
46+
left: 50%;
47+
transform: translate(-50%, -50%);
48+
background: #000;
49+
width: 100%;
50+
height: 100%;
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
opacity: 1;
55+
transition: opacity 0.7s;
56+
}
57+
58+
.trailer-container video {
59+
position: relative;
60+
max-width: 900px;
61+
outline: none;
62+
}
63+
64+
.close-icon {
65+
position: absolute;
66+
top: 30px;
67+
right: 30px;
68+
color: #f26415;
69+
font-size: 40px;
70+
cursor: pointer;
71+
font-family: sans-serif;
72+
padding: 10px;
73+
border-radius: 100%;
74+
}
75+
76+
@media (max-width: 991px) {
77+
.trailer-container video {
78+
max-width: 90%;
79+
}
80+
}
81+
82+
/* JavaScript */
83+
.active.trailer-container {
84+
visibility: hidden;
85+
opacity: 0;
86+
}

‎18. Video Trailer Popup/thumb-1920-597965.jpg‎

283 KB
Loading

‎18. Video Trailer Popup/trailer.mp4‎

23.6 MB
Binary file not shown.

0 commit comments

Comments
 (0)