#326: Solution for a Video Popup Modal

examples/video-popup/README.md

@@ -0,0 +1,136 @@
+# 🎬 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.
+- `<button class="close-btn" id="closeModalBtn">&times;</button>` — The close icon (×) used to close the modal.
+- `<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 openBtn = document.getElementById("openModalBtn");
+    const closeBtn = document.getElementById("closeModalBtn");
+    const modal = document.getElementById("videoModal");
+    const video = document.getElementById("trailer");
+
+   ```
+   These lines reference the key DOM elements for manipulation.
+
+2. **Open Modal Functionality**
+   ```js
+    openBtn.addEventListener("click", () => {
+      modal.classList.add("active");
+      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
+    closeBtn.addEventListener("click", () => {
+      modal.classList.remove("active");
+      video.pause();
+      video.currentTime = 0; // reset to beginning
+    });
+   ```
+   When the close icon (×) is clicked, the modal hides, the video pauses, and the playback resets.
+
+4. **Outside Click Close**
+   ```js
+    modal.addEventListener("click", (e) => {
+      if (e.target === modal) {
+        modal.classList.remove("active");
+        video.pause();
+        video.currentTime = 0;
+      }
+    });
+   ```
+   This ensures that clicking **outside the modal content** also closes the popup and stops the video.
+
+---
+
+**Author:** Rohan Kedari

examples/video-popup/index.html

@@ -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>

examples/video-popup/script.js

@@ -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;
+  }
+});

examples/video-popup/style.css

@@ -0,0 +1,178 @@
+/* Base styles */
+body {
+  font-family: Arial, sans-serif;
+  background: #ffffff;
+  color: #333;
+  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;
+  }
+}