// script.js
let player;
const image9027 = document.getElementById("image");
const image9405 = document.getElementById("image1");

const videoPopup = document.getElementById("video-popup");
const closeButton = document.getElementById("close-button");

image9405.addEventListener("click", () => {
    videoPopup.style.top = "0";
    videoPopup.style.left = "0";
    playYouTubeVideo('ZGkqbkvVZyI');
});

image9027.addEventListener("click", () => {
    videoPopup.style.top = "0";
    videoPopup.style.left = "0";
    playYouTubeVideo("MmsVzQtmRs4");
});

closeButton.addEventListener("click", closeVideoPopup);

document.addEventListener("click", (event) => {
    if (event.target === videoPopup) {
        closeVideoPopup();
    }
});

document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") {
        closeVideoPopup();
    }
});

function playYouTubeVideo(url) {
    player = new YT.Player('player', {
        height: '100%',
        width: '100%',
        videoId: url,
        events: {
            'onReady': onPlayerReady,
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

function closeVideoPopup() {
    if (player) {
        player.destroy(); // Destroy the YouTube player instance
    }
    videoPopup.style.top = "-9999px";
    videoPopup.style.left = "-9999px";
}