Create an Example Solution for a Video Popup Modal

[sumn2u]

📝 Description

We need a popup modal that plays a video trailer when triggered.
This project is perfect for movie previews, product demos, or any interactive video content, and helps practice modals, video control, and event handling in JavaScript.

---

🎯 Requirements

• Open the popup modal when the user clicks a button or image
• Play a video inside the modal
• Include a close button to stop the video and close the popup
• Ensure the design is responsive for all screen sizes

---

💡 Concepts to Demonstrate

• Creating a modal and toggling its visibility
• Embedding and controlling HTML5 video (play, pause)
• Handling events for open/close actions
• Using CSS overlays, transitions, and animations for a smooth experience

---

🚀 Bonus Challenge

• Add autoplay when the modal opens
• Automatically pause or stop the video when the modal closes
• Include fade-in/out animations for the modal

---

📦 Deliverables

• A working example using HTML, CSS, and JavaScript
• Include a short README or inline comments explaining how your code works
• Submit your solution as:
  • A pull request in the examples/ folder, or
  • A CodePen, JSFiddle, or GitHub Gist link

---

[soonu-kedari]

@sumn2u Please assign it to me I am interested to do this for hacktoberfest

[soonu-kedari]

Just one question do i need to fork learn-Javascript or need to fork Idiomatic Contributing ?

[sumn2u]

Just one question do i need to fork learn-Javascript or need to fork Idiomatic Contributing ?

Nice question! You can do something like this, but make sure to place everything inside a folder named after the example project (e.g., Video Popup Modal).