Skip to content

#326: Solution for a Video Popup Modal #329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sumn2u merged 3 commits into from
Oct 5, 2025
Merged

#326: Solution for a Video Popup Modal #329

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8f0b211
#326: Solution for a Video Popup Modal
soonu-kedari Oct 5, 2025
750123d
FIX: Comment fixes for a Video Popup Modal
soonu-kedari Oct 5, 2025
605b250
FIX: Update README.md and style.css for dark text color
soonu-kedari Oct 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions examples/video-popup/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
# 🎬 Video Modal Popup

This project demonstrates how to create a **popup modal** that plays a **video trailer** when triggered by a button click.
It’s perfect for **movie previews, product demos**, or any **interactive video showcase**.

---

## 📁 Project Structure
```
video-modal/
│
├── index.html # Main HTML structure
├── style.css # Styling and responsive design
├── script.js # Event handling and video control logic
└── README.md # Project documentation
```

---

## 🧩 Features
- 🎥 Opens a modal when clicking the **Play Trailer** button
- ▶️ Plays an HTML5 video automatically inside the modal
- ❌ Includes a close button and closes on outside click
- 🔄 Automatically **pauses and resets** the video when closed
- 📱 Fully **responsive** across all screen sizes
- 💫 Smooth fade-in animation and hover effects

---

## ⚙️ How It Works (Detailed Explanation)

### 🏗️ 1. index.html

The `index.html` file defines the structure of the webpage. It includes:

#### **Key Elements**
- `<div class="movie-card">` — Wraps all content like the movie thumbnail, title, description, and button.
- `<img>` — Displays the movie’s thumbnail or poster image.
- `<h1>` — The movie title.
- `<p>` — A short movie description or tagline.
- `<button id="openModalBtn">` — Button to trigger the modal popup.
- `<div id="videoModal" class="modal">` — The modal container that holds the video player.
- `<span class="close">&times;</span>` — The close icon (×) used to close the modal.
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation shows the close button as a <span> element with class 'close', but the actual implementation uses a <button> element with class 'close-btn' and id 'closeModalBtn'.

Suggested change
- `<span class="close">&times;</span>` — The close icon (×) used to close the modal.
- `<button class="close-btn" id="closeModalBtn">&times;</button>` — The close icon (×) used to close the modal.

Copilot uses AI. Check for mistakes.
- `<video>` — The HTML5 video element that plays the trailer inside the modal.

These elements are organized in a clean hierarchy to ensure readability and easy maintenance.

---

### 🎨 2. style.css

The `style.css` file controls how the page looks and behaves on different screen sizes. It ensures the design is both **modern** and **responsive**.

#### **Example Styles Explained**

- `.modal`
Creates a **full-screen overlay** when the modal is active. It uses properties like:
```css
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
```
This ensures the modal takes up the whole viewport with a dark transparent background.

- `.modal-content`
Styles the inner video player window. Example:
```css
background: #000;
padding: 10px;
border-radius: 10px;
max-width: 90%;
width: 800px;
```
This keeps the video centered and scaled properly on all devices.

- `@media (max-width: 768px)`
Adjusts layout for **mobile and tablet** viewports, ensuring text and buttons resize correctly.

---

### ⚙️ 3. script.js

The `script.js` file manages all interactions between the user and the modal.

#### **Functions Explained**
1. **Element References**
```js
const modal = document.getElementById("videoModal");
const btn = document.getElementById("openModalBtn");
const span = document.getElementById("closeModalBtn");
const video = document.getElementById("trailer");
```
These lines reference the key DOM elements for manipulation.

2. **Open Modal Functionality**
```js
btn.onclick = function() {
modal.style.display = "flex";
video.play();
}
```
When the **Play Trailer** button is clicked, this function makes the modal visible and starts playing the video.

3. **Close Modal Functionality**
```js
span.onclick = function() {
modal.style.display = "none";
video.pause();
video.currentTime = 0;
}
```
When the close icon (×) is clicked, the modal hides, the video pauses, and the playback resets.

4. **Outside Click Close**
```js
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
video.pause();
video.currentTime = 0;
}
}
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation shows outdated code using onclick property and style.display, but the actual implementation uses addEventListener and CSS classes with classList.add('active').

Suggested change
btn.onclick = function() {
modal.style.display = "flex";
video.play();
}
```
When the **Play Trailer** button is clicked, this function makes the modal visible and starts playing the video.
3. **Close Modal Functionality**
```js
span.onclick = function() {
modal.style.display = "none";
video.pause();
video.currentTime = 0;
}
```
When the close icon (×) is clicked, the modal hides, the video pauses, and the playback resets.
4. **Outside Click Close**
```js
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
video.pause();
video.currentTime = 0;
}
}
btn.addEventListener('click', function() {
modal.classList.add('active');
video.play();
});

When the Play Trailer button is clicked, this function makes the modal visible and starts playing the video.

  1. Close Modal Functionality

    span.addEventListener('click', function() {
    modal.classList.remove('active');
    video.pause();
    video.currentTime = 0;
});

    When the close icon (×) is clicked, the modal hides, the video pauses, and the playback resets.

  2. Outside Click Close

    window.addEventListener('click', function(event) {
    if (event.target === modal) {
        modal.classList.remove('active');
        video.pause();
        video.currentTime = 0;
    }
});

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation shows outdated code using window.onclick and style.display, but the actual implementation uses modal.addEventListener and classList.remove('active').

Suggested change
btn.onclick = function() {
modal.style.display = "flex";
video.play();
}
```
When the **Play Trailer** button is clicked, this function makes the modal visible and starts playing the video.
3. **Close Modal Functionality**
```js
span.onclick = function() {
modal.style.display = "none";
video.pause();
video.currentTime = 0;
}
```
When the close icon (×) is clicked, the modal hides, the video pauses, and the playback resets.
4. **Outside Click Close**
```js
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
video.pause();
video.currentTime = 0;
}
}
btn.addEventListener("click", function() {
modal.classList.add("active");
video.play();
});

When the Play Trailer button is clicked, this function makes the modal visible and starts playing the video.

  1. Close Modal Functionality

    span.addEventListener("click", function() {
    modal.classList.remove("active");
    video.pause();
    video.currentTime = 0;
});

    When the close icon (×) is clicked, the modal hides, the video pauses, and the playback resets.

  2. Outside Click Close

    modal.addEventListener("click", function(event) {
    if (event.target === modal) {
        modal.classList.remove("active");
        video.pause();
        video.currentTime = 0;
    }
});

Copilot uses AI. Check for mistakes.
```
This ensures that clicking **outside the modal content** also closes the popup and stops the video.

---

**Author:** Rohan Kedari
41 changes: 41 additions & 0 deletions examples/video-popup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Modal Popup</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="movie-card">
<img
src="https://m.media-amazon.com/images/I/81p+xe8cbnL._AC_SY679_.jpg"
alt="Movie Thumbnail"
class="thumbnail"
/>
<h2 class="movie-title">Inception</h2>
<p class="movie-description">
A thief who enters the dreams of others to steal secrets from their
subconscious is given a chance to have his criminal record erased.
</p>
<button class="btn" id="openModalBtn">▶ Play Trailer</button>
</div>

<!-- Modal -->
<div class="modal" id="videoModal">
<div class="modal-content">
<h2 class="popup-title">Inception</h2>
<button class="close-btn" id="closeModalBtn">&times;</button>
<video id="trailer" controls>
<source
src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
26 changes: 26 additions & 0 deletions examples/video-popup/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
const openBtn = document.getElementById("openModalBtn");
const closeBtn = document.getElementById("closeModalBtn");
const modal = document.getElementById("videoModal");
const video = document.getElementById("trailer");

// Open modal
openBtn.addEventListener("click", () => {
modal.classList.add("active");
video.play();
});

// Close modal
closeBtn.addEventListener("click", () => {
modal.classList.remove("active");
video.pause();
video.currentTime = 0; // reset to beginning
});

// Close when clicking outside the video
modal.addEventListener("click", (e) => {
if (e.target === modal) {
modal.classList.remove("active");
video.pause();
video.currentTime = 0;
}
});
178 changes: 178 additions & 0 deletions examples/video-popup/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
/* Base styles */
body {
font-family: Arial, sans-serif;
background: #ffffff;
color: #fff;
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The body has a white background (#ffffff) but white text color (#fff), making the text invisible. This should be corrected to use a dark text color like #333 or change the background to a dark color.

Suggested change
color: #fff;
color: #333;

Copilot uses AI. Check for mistakes.
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}

/* Movie card container */
.movie-card {
text-align: center;
max-width: 400px;
width: 100%;
background: #1c1c1c;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease;
}
.movie-card:hover {
transform: translateY(-5px);
}

.thumbnail {
width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 15px;
}

.movie-title {
font-size: 24px;
margin: 10px 0 5px;
}

.popup-title {
font-size: 24px;
margin: 10px;
}

.movie-description {
font-size: 15px;
color: #ccc;
line-height: 1.4;
margin-bottom: 15px;
}

/* Trigger button */
.btn {
background: #e50914;
border: none;
padding: 12px 24px;
color: #fff;
font-size: 18px;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
background: #f40612;
transform: scale(1.05);
}

/* Modal overlay */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.8);
z-index: 1000;
padding: 10px;
}
.modal.active {
display: flex;
animation: fadeIn 0.3s ease;
}

/* Modal content */
.modal-content {
position: relative;
width: 90%;
max-width: 800px;
background: #000;
border-radius: 10px;
overflow: hidden;
}

/* Video */
video {
width: 100%;
height: auto;
display: block;
}

/* Close button */
.close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
font-weight: bold;
color: #fff;
cursor: pointer;
background: transparent;
border: none;
}

/* Animations */
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

/* ============================= */
/* Responsive Styles */
/* ============================= */

/* Tablets */
@media (max-width: 768px) {
.movie-card {
max-width: 90%;
padding: 16px;
}
.movie-title {
font-size: 20px;
}
.movie-description {
font-size: 14px;
}
.btn {
font-size: 16px;
padding: 10px 18px;
}
}

/* Small mobiles */
@media (max-width: 480px) {
body {
flex-direction: column;
}
.movie-card {
padding: 14px;
border-radius: 8px;
}
.thumbnail {
border-radius: 8px;
}
.movie-title {
font-size: 18px;
}
.movie-description {
font-size: 13px;
}
.btn {
font-size: 15px;
width: 100%;
}
.close-btn {
font-size: 24px;
right: 10px;
top: 8px;
}
.modal-content {
width: 100%;
border-radius: 6px;
}
}