I'm creating a popup with a YouTube video that opens on page load. It's working well, but I need help closing the popup when the video finishes. Any suggestions?
The problem is that the video appears in a popup and I need to close it once the video is finished. The video comes from youtube. I haven’t found a plugin that lets you take action (in this case, close the popup) once the video is finished.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Popup</title>
<style>
/* Style for the overlay */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
/* Style for the video container */
.video-container {
position: relative;
width: 100%;
height: 100%;
}
/* Style for the close button */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<!-- Overlay with video container -->
<div class="overlay" id="videoOverlay">
<div class="video-container">
<span class="close-btn" onclick="closeVideo()">X</span>
<!-- YouTube video embed code -->
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/6aB20wVU9lA?autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<script>
// Function to show the video overlay
function showVideo() {
document.getElementById('videoOverlay').style.display = 'flex';
}
// Function to close the video overlay
function closeVideo() {
document.getElementById('videoOverlay').style.display = 'none';
// Set a cookie to prevent the popup from showing for the next 10 minutes
var now = new Date();
var expires = new Date();
expires.setTime(now.getTime() + 10 * 60 * 1000);
document.cookie = 'popupShown=true; expires=' + expires.toUTCString() + '; path=/';
}
// Check if the cookie is set before showing the popup
function checkCookie() {
var popupShown = getCookie('popupShown');
if (!popupShown) {
// Show the video popup if the cookie is not set
showVideo();
}
}
// Function to get the value of a cookie by name
function getCookie(name) {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(name + '=') === 0) {
return cookie.substring((name + '=').length, cookie.length);
}
}
return null;
}
// Call checkCookie on page load
window.onload = checkCookie;
</script>
</body>
</html>````