Best matchRelated: audio controlsBeginner
Background Video
Connect JavaScript controls to browser audio playback.
Build a background video →Video Trailer Popup
Build a video trailer popup with HTML, CSS, and JavaScript while practicing click events and DOM selection.
Beginner20–30 minutesHTML5CSS3JavaScript
You’ll practice
Click EventsDOM SelectionCSS Class Toggling
01 — What you’ll build
Video Trailer Popup
In this project, we’re going to build a video trailer popup using HTML, CSS, and JavaScript. You’ll see how to open and close a focused popup while keeping the page state organized. Along the way, you’ll practice click events, DOM selection, and CSS class toggling, so you can understand how the interface and JavaScript logic work together.
02 — Included
- Interactive audio controls
- Video Trailer Popup interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Handle user clicks
- Select HTML elements from the DOM
- Change styles by updating CSS classes
- Control audio with JavaScript
- Perform calculations with JavaScript
Recommended knowledge: Basic HTML and CSS, DOM events and the HTML audio element, JavaScript variables and number operations, DOM selection and click events.
Complete project files
Build It from the Source Code
This project runs directly in the browser with HTML, CSS, and JavaScript.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for external assets.
Project structure
video-trailer-popup/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Trailer Popup</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<img
src="https://images.pexels.com/photos/3062545/pexels-photo-3062545.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="movie-image"
/>
<h1>Movie Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum iste
necessitatibus porro explicabo illo dolorum dolores cupiditate non modi
quasi nobis, earum ab, autem esse vero sapiente minus vel! Provident?
</p>
<button class="btn">Watch now</button>
</div>
<div class="trailer-container active">
<video src="trailer.mp4" controls="true"></video>
<i class="fas fa-times fa-2x close-icon"></i>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice audio controls, javaScript calculations, and click events with these related projects.
Best match
Related: JavaScript calculations
Animated Search Bar
Turn JavaScript calculations into clear visual results.
Build an animated search bar →
Related: click eventsBeginner
Blurred Background Popup
Connect user clicks to visible interface changes.
Build a blurred background popup →Related: audio controlsBest match
Background Video
Connect JavaScript controls to browser audio playback.
Build a background videoRelated: JavaScript calculations
Animated Search Bar
Turn JavaScript calculations into clear visual results.
Build an animated search barRelated: click events
Blurred Background Popup
Connect user clicks to visible interface changes.
Build a blurred background popup