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

Design Video trailer Popup in HTML CSS & JavaScript

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.

Tags:

#Dev Scripter 2024 #JavaScript-Projects #Dev Scripter #JavaScript #Project #Web Technologies

Approach / Functionalities:

Steps to Create and Configure the Project

Javascript

HTML

CSS

Design Video trailer Popup in HTML CSS & JavaScript

Similar Reads

Contact Us