Skip to content

Commit 74c2495

Browse files
soonu-kedarisumn2u
soonu-kedari
authored and
sumn2u
committed
#326: Solution for a Video Popup Modal
1 parent e9e43ec commit 74c2495

4 files changed

Lines changed: 378 additions & 0 deletions

File tree

‎examples/video-popup/README.md‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# 🎬 Video Modal Popup
2+
3+
This project demonstrates how to create a **popup modal** that plays a **video trailer** when triggered by a button click.
4+
It’s perfect for **movie previews, product demos**, or any **interactive video showcase**.
5+
6+
---
7+
8+
## 📁 Project Structure
9+
```
10+
video-modal/
11+
│
12+
├── index.html # Main HTML structure
13+
├── style.css # Styling and responsive design
14+
├── script.js # Event handling and video control logic
15+
└── README.md # Project documentation
16+
```
17+
18+
---
19+
20+
## 🧩 Features
21+
- 🎥 Opens a modal when clicking the **Play Trailer** button
22+
- ▶️ Plays an HTML5 video automatically inside the modal
23+
- ❌ Includes a close button and closes on outside click
24+
- 🔄 Automatically **pauses and resets** the video when closed
25+
- 📱 Fully **responsive** across all screen sizes
26+
- 💫 Smooth fade-in animation and hover effects
27+
28+
---
29+
30+
## ⚙️ How It Works (Detailed Explanation)
31+
32+
### 🏗️ 1. index.html
33+
34+
The `index.html` file defines the structure of the webpage. It includes:
35+
36+
#### **Key Elements**
37+
- `<div class="movie-container">` — Wraps all content like the movie thumbnail, title, description, and button.
38+
- `<img>` — Displays the movie’s thumbnail or poster image.
39+
- `<h1>` — The movie title.
40+
- `<p>` — A short movie description or tagline.
41+
- `<button id="openModal">` — Button to trigger the modal popup.
42+
- `<div id="videoModal" class="modal">` — The modal container that holds the video player.
43+
- `<span class="close">&times;</span>` — The close icon (×) used to close the modal.
44+
- `<video>` — The HTML5 video element that plays the trailer inside the modal.
45+
46+
These elements are organized in a clean hierarchy to ensure readability and easy maintenance.
47+
48+
---
49+
50+
### 🎨 2. style.css
51+
52+
The `style.css` file controls how the page looks and behaves on different screen sizes. It ensures the design is both **modern** and **responsive**.
53+
54+
#### **Example Styles Explained**
55+
56+
- `.modal`
57+
Creates a **full-screen overlay** when the modal is active. It uses properties like:
58+
```css
59+
position: fixed;
60+
top: 0;
61+
left: 0;
62+
width: 100%;
63+
height: 100%;
64+
background: rgba(0, 0, 0, 0.7);
65+
display: none;
66+
justify-content: center;
67+
align-items: center;
68+
```
69+
This ensures the modal takes up the whole viewport with a dark transparent background.
70+
71+
- `.modal-content`
72+
Styles the inner video player window. Example:
73+
```css
74+
background: #000;
75+
padding: 10px;
76+
border-radius: 10px;
77+
max-width: 90%;
78+
width: 800px;
79+
```
80+
This keeps the video centered and scaled properly on all devices.
81+
82+
- `@media (max-width: 768px)`
83+
Adjusts layout for **mobile and tablet** viewports, ensuring text and buttons resize correctly.
84+
85+
---
86+
87+
### ⚙️ 3. script.js
88+
89+
The `script.js` file manages all interactions between the user and the modal.
90+
91+
#### **Functions Explained**
92+
1. **Element References**
93+
```js
94+
const modal = document.getElementById("videoModal");
95+
const btn = document.getElementById("openModal");
96+
const span = document.getElementsByClassName("close")[0];
97+
const video = document.getElementById("trailerVideo");
98+
```
99+
These lines reference the key DOM elements for manipulation.
100+
101+
2. **Open Modal Functionality**
102+
```js
103+
btn.onclick = function() {
104+
modal.style.display = "flex";
105+
video.play();
106+
}
107+
```
108+
When the **Play Trailer** button is clicked, this function makes the modal visible and starts playing the video.
109+
110+
3. **Close Modal Functionality**
111+
```js
112+
span.onclick = function() {
113+
modal.style.display = "none";
114+
video.pause();
115+
video.currentTime = 0;
116+
}
117+
```
118+
When the close icon (×) is clicked, the modal hides, the video pauses, and the playback resets.
119+
120+
4. **Outside Click Close**
121+
```js
122+
window.onclick = function(event) {
123+
if (event.target == modal) {
124+
modal.style.display = "none";
125+
video.pause();
126+
video.currentTime = 0;
127+
}
128+
}
129+
```
130+
This ensures that clicking **outside the modal content** also closes the popup and stops the video.
131+
132+
---
133+
134+
**Author:** Rohan Kedari

‎examples/video-popup/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Video Modal Popup</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="movie-card">
11+
<img
12+
src="https://m.media-amazon.com/images/I/81p+xe8cbnL._AC_SY679_.jpg"
13+
alt="Movie Thumbnail"
14+
class="thumbnail"
15+
/>
16+
<h2 class="movie-title">Inception</h2>
17+
<p class="movie-description">
18+
A thief who enters the dreams of others to steal secrets from their
19+
subconscious is given a chance to have his criminal record erased.
20+
</p>
21+
<button class="btn" id="openModalBtn">▶ Play Trailer</button>
22+
</div>
23+
24+
<!-- Modal -->
25+
<div class="modal" id="videoModal">
26+
<div class="modal-content">
27+
<h2 class="popup-title">Inception</h2>
28+
<button class="close-btn" id="closeModalBtn">&times;</button>
29+
<video id="trailer" controls>
30+
<source
31+
src="https://www.w3schools.com/html/mov_bbb.mp4"
32+
type="video/mp4"
33+
/>
34+
Your browser does not support the video tag.
35+
</video>
36+
</div>
37+
</div>
38+
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

‎examples/video-popup/script.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const openBtn = document.getElementById("openModalBtn");
2+
const closeBtn = document.getElementById("closeModalBtn");
3+
const modal = document.getElementById("videoModal");
4+
const video = document.getElementById("trailer");
5+
6+
// Open modal
7+
openBtn.addEventListener("click", () => {
8+
modal.classList.add("active");
9+
video.play();
10+
});
11+
12+
// Close modal
13+
closeBtn.addEventListener("click", () => {
14+
modal.classList.remove("active");
15+
video.pause();
16+
video.currentTime = 0; // reset to beginning
17+
});
18+
19+
// Close when clicking outside the video
20+
modal.addEventListener("click", (e) => {
21+
if (e.target === modal) {
22+
modal.classList.remove("active");
23+
video.pause();
24+
video.currentTime = 0;
25+
}
26+
});

‎examples/video-popup/style.css‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
/* Base styles */
2+
body {
3+
font-family: Arial, sans-serif;
4+
background: #ffffff;
5+
color: #fff;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
min-height: 100vh;
10+
margin: 0;
11+
padding: 20px;
12+
box-sizing: border-box;
13+
}
14+
15+
/* Movie card container */
16+
.movie-card {
17+
text-align: center;
18+
max-width: 400px;
19+
width: 100%;
20+
background: #1c1c1c;
21+
padding: 20px;
22+
border-radius: 12px;
23+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
24+
transition: transform 0.3s ease;
25+
}
26+
.movie-card:hover {
27+
transform: translateY(-5px);
28+
}
29+
30+
.thumbnail {
31+
width: 100%;
32+
height: auto;
33+
border-radius: 10px;
34+
margin-bottom: 15px;
35+
}
36+
37+
.movie-title {
38+
font-size: 24px;
39+
margin: 10px 0 5px;
40+
}
41+
42+
.popup-title{
43+
font-size: 24px;
44+
margin: 10px;
45+
}
46+
47+
.movie-description {
48+
font-size: 15px;
49+
color: #ccc;
50+
line-height: 1.4;
51+
margin-bottom: 15px;
52+
}
53+
54+
/* Trigger button */
55+
.btn {
56+
background: #e50914;
57+
border: none;
58+
padding: 12px 24px;
59+
color: #fff;
60+
font-size: 18px;
61+
border-radius: 6px;
62+
cursor: pointer;
63+
transition: background 0.3s ease, transform 0.2s ease;
64+
}
65+
.btn:hover {
66+
background: #f40612;
67+
transform: scale(1.05);
68+
}
69+
70+
/* Modal overlay */
71+
.modal {
72+
position: fixed;
73+
top: 0; left: 0;
74+
width: 100%;
75+
height: 100%;
76+
display: none;
77+
justify-content: center;
78+
align-items: center;
79+
background: rgba(0,0,0,0.8);
80+
z-index: 1000;
81+
padding: 10px;
82+
}
83+
.modal.active {
84+
display: flex;
85+
animation: fadeIn 0.3s ease;
86+
}
87+
88+
/* Modal content */
89+
.modal-content {
90+
position: relative;
91+
width: 90%;
92+
max-width: 800px;
93+
background: #000;
94+
border-radius: 10px;
95+
overflow: hidden;
96+
}
97+
98+
/* Video */
99+
video {
100+
width: 100%;
101+
height: auto;
102+
display: block;
103+
}
104+
105+
/* Close button */
106+
.close-btn {
107+
position: absolute;
108+
top: 10px;
109+
right: 15px;
110+
font-size: 28px;
111+
font-weight: bold;
112+
color: #fff;
113+
cursor: pointer;
114+
background: transparent;
115+
border: none;
116+
}
117+
118+
/* Animations */
119+
@keyframes fadeIn {
120+
from {opacity: 0;}
121+
to {opacity: 1;}
122+
}
123+
124+
/* ============================= */
125+
/* Responsive Styles */
126+
/* ============================= */
127+
128+
/* Tablets */
129+
@media (max-width: 768px) {
130+
.movie-card {
131+
max-width: 90%;
132+
padding: 16px;
133+
}
134+
.movie-title {
135+
font-size: 20px;
136+
}
137+
.movie-description {
138+
font-size: 14px;
139+
}
140+
.btn {
141+
font-size: 16px;
142+
padding: 10px 18px;
143+
}
144+
}
145+
146+
/* Small mobiles */
147+
@media (max-width: 480px) {
148+
body {
149+
flex-direction: column;
150+
}
151+
.movie-card {
152+
padding: 14px;
153+
border-radius: 8px;
154+
}
155+
.thumbnail {
156+
border-radius: 8px;
157+
}
158+
.movie-title {
159+
font-size: 18px;
160+
}
161+
.movie-description {
162+
font-size: 13px;
163+
}
164+
.btn {
165+
font-size: 15px;
166+
width: 100%;
167+
}
168+
.close-btn {
169+
font-size: 24px;
170+
right: 10px;
171+
top: 8px;
172+
}
173+
.modal-content {
174+
width: 100%;
175+
border-radius: 6px;
176+
}
177+
}

0 commit comments

Comments
 (0)