Design Video trailer Popup in HTML CSS & JavaScript

Design Video trailer Popup in HTML CSS & JavaScript

Last Updated : 23 Jul, 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.

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(&quot;background.jpg&quot;);
  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;
}

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";
});

Output :

Design Video trailer Popup in HTML CSS & JavaScript

M

mguru4c05q

Improve

Article Tags :

Similar Reads

Design a Student Attendance Portal in HTML CSS & JavaScript

The Student Attendance Portal is a web application that allows users to mark attendance for students in different classes, add class and students according to requirements, providing a user-friendly interface to update and visualize attendance records. Final Output PreviewApproach:In the first step,

Design a Business Agency Website in HTML CSS & JavaScript

A business agency website can be used to showcase any kind of business in an attractive and interactive way to the users. It contains different sections that represent the services offered by your business. Approach:The HTML structure includes various sections such as the header, navigation, main co

Design Hit the Mouse Game using HTML, CSS and Vanilla Javascript

In this article, we are going to create a game in which a mouse comes out from the holes, and we hit the mouse with a hammer to gain points. It is designed using HTML, CSS & Vanilla JavaScript.HTML Code:First, we create an HTML file (index.html).Now, after creating the HTML file, we are going to

Design a Video Slide Animation Effect using HTML CSS and JavaScript

Nowadays, Video Slide animations are very popular. In this article, we will see how to make Video Slide Animation using HTML, CSS, and JavaScript on any webpage. Below are the two steps on how to do it. It will help the beginner to build some awesome Video Slide animations using HTML, CSS, and JS by

How to create Popup Box using HTML CSS and JavaScript?

Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a