Design a Student Attendance Portal 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 a Student Attendance Portal 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. Approach:In the first step, we will create a fo

Design a School Website in HTML CSS and JavaScript

A School Website developed using HTML, CSS, and JavaScript is an interactive platform that provides information about the school, its faculty, courses, events, and other relevant details. It incorporates responsive design principles to ensure compatibility across various devices, offering an engagin

Design Responsive Flower Store in HTML CSS & JavaScript

In this article, we will see how can we design a Responsive Flower Store with the help of HTML, CSS, and JavaScript. Prerequisites:HTMLCSSJAVASCRIPT Approach:Created a login form using basic html CSS Created Signup form .Created a Sign out Cart page on the main page first Created a navbar with home

Design a Online Grocery Website in HTML CSS & JavaScript

Online grocery shopping has become increasingly popular, especially in recent times. This project aims to create a user-friendly and responsive website for purchasing groceries online. Users can browse through the various categories, add items to their cart, and proceed to checkout making their groc

Design a Online Cake Shop Website in HTML CSS & JavaScript

Every business is going online nowadays for better growth and productivity. We are going to build an online cake shop website that will represent the shop in a good manner having features of online ordering and views and many more. PrerequisitesHTMLCSSJavaScriptApproachWe first create an HTML file w

Design a Responsive Product Card using HTML, CSS & JavaScript

We'll create a responsive product card using HTML, CSS, and JavaScript. A product card is a basic UI element used in e-commerce websites to show product details in a simple format. We're creating a one-size-fits-all product card for online use. It's designed to work well on any screen size so it wil

Design Joke Generator App in HTML CSS & JavaScript

We will go to learn how can we create a Joke generator app using HTML, CSS, and JavaScript. We will also add a feature to copy the generated joke. We will use API to fetch the jokes and will show those jokes on the screen. PrerequisitesHTMLCSSJavaScriptApproachCreate the Joke Generator Application U

Custom Video Player using HTML, CSS and JavaScript

In this article, we are going to implement a Custom Video Player using HTML CSS JavaScript. We will be using HTML to structure our project, CSS for designing purpose and JavaScript will be used to provide the required functionality. Preview of final Output: Let us have a look at how the final output

Design a Toggleable Sidebar using HTML CSS and JavaScript

In this article, we will create a toggleable sidebar navigation menu using HTML, CSS, and JavaScript. The navigation menu allows users to open and close a sidebar to access various sections of a website. When the user clicks on a navigation item, the corresponding content is displayed in the main co

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