Closing a modal

Hi,
I have a modal with a video. And the modal is a container with a video in it. I want users to be able to close the modal when they click outside the video.
I took the container and added an event listener to it.
The problem is that the modal gets closed even if they click on the video. With is something I don’t want. I want them to be able to click on the video to pause play etc. It also created a weird interaction if the video is the full screen as if you click on the video to pause it. The modal gets close and the video stays full screen and it’s bugged out.

here is the function

“`
const playVideo = () => {
const videoContainer = document.querySelector(“.video-container”);
const video = document.querySelector(“.video-container video”);
const playButton = document.querySelector(“.main-button img”);
const body = document.querySelector(“body”);

playButton.addEventListener(“click”, () => {
videoContainer.classList.add(“show-video”);
video.play();
body.style.overflow = “hidden”;
});

videoContainer.addEventListener(“click”, () => {
videoContainer.classList.remove(“show-video”);
video.pause();
body.style.overflow = “initial”;
});
};
playVideo();
“`

Also in #JavaScript _↴