Design Video trailer Popup in HTML CSS & JavaScript

Last Updated : 21 Feb, 2024

This project aims to create a video trailer popup using HTML, CSS and JavaScript. When a user clicks on a button or an image thumbnail a popup window will appear displaying the video trailer. This interactive feature enhances user experience and engagement on websites or web applications.

Preview

a0-(1)

Project Structure:

Screenshot-2023-10-05-222543

Approach / Functionalities:

Create a button or image thumbnail to the trigger the popup.
Design the popup using CSS to overlay on the top of the webpage.
Implement JavaScript to show and hide the popup when the trigger element is clicked.
Embed the video trailer inside the popup using the HTML <video> tag or iframe.

Steps to Create and Configure the Project:

Create an HTML file for webpage structure.
Style the webpage using CSS to the create the popup layout.
Write JavaScript code to the handle popup functionality.
Embed the video trailer using the HTML <video> tag or iframe.
Test the application locally in the web browser.

Example: To demonstrate the working of the video trailer popup using HTML, CSS and JavaScript.

Javascript

const popup = document.getElementById("popup");
const close = document.getElementById("close");
const videoPopup1 = document.getElementById("videoPopup1");
 
popup.addEventListener("click", () => {
  videoPopup1.style.display = "block";
});
close.addEventListener("click", () => {
  videoPopup1.style.display = "none";
});

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Video Trailer Popup</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="background"></div>
    <button id="popup">Watch Trailer</button>
    <div id="videoPopup1" class="popup">
      <div class="popup-content">
        <span class="close" id="close">×</span>
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/MCG7S2fGUeU"
          frameborder="0"
          allowfullscreen
        ></iframe>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("background.jpg");
  background-size: cover;
  z-index: -1;
}
#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #ff4500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #000;
  cursor: pointer;
}

Output :

Video trailer popup in HTML, CSS and JavaScript

Suggest improvement

Custom Video Player using HTML, CSS and JavaScript

Share your thoughts in the comments