/* Style for the overlay background */ .video-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1; } /* Style for the popup content */ .video-popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 5px; border-radius: 5px; width: 60%; /* Adjust the width as needed */ max-width: 500px; /* Adjust the maximum width as needed */ } /* Style for the close button */ .close-button { position: absolute; top: -15px; right: -12px; cursor: pointer; color: white; background-color: #0a0a0a; border-radius: 100%; padding: 2px 8px 2px 8px; border: 1px solid white; } /* Style for the video player */ video { width: 100%; max-width: 100%; /* Adjust the maximum width as needed */ } Watch Video document.addEventListener("DOMContentLoaded", function () { const openButton = document.getElementById("open-video-popup"); const closeButton = document.getElementById("close-video-popup"); const videoPopup = document.getElementById("video-popup"); // Automatically open the video popup when the page loads videoPopup.style.display = "block"; closeButton.addEventListener("click", function () { videoPopup.style.display = "none"; console.log('ewe') }); });