Как остановить воспроизведение видео на фоне всплывающего видео даже после закрытия

Я создал всплывающее окно с видео, нажав кнопку с помощью jquery. Проблема в том, что видео по-прежнему оплачивается в фоновом режиме даже после закрытия всплывающего окна с видео нажатием кнопки закрытия (X). Ниже приведен код, любезно помогающий мне разобраться в этой проблеме.

HTML:

<button class = "light">Click Here</button>


    <div class = "popup__overlay">
 <div id = "popupVid" class = "popup"><a class = "popup__close" href = "#">X</a><br />
<video id = "framevideo" controls = "controls" width = "300" height = "150">
    <source src = "http://indivillage.in/eocares_test/wp-content/uploads/2018/12/y2mate.com-doremon_episode_mini_doremon__yziyijrh5E_360p.mp4" type = "video/mp4" />
</video>
        </div>

CSS:

.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
z-index: 100;
}

.popup__overlay:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content: "";
}

.popup {
 display: inline-block;
 position: relative;
 width: 100%;
 height: 100%;
 max-width: 640px;
 max-height: 480px;
 padding: 20px;


 color: white;
vertical-align: middle;
}

.popup-form__row {
margin: 1em 0;
}

.popup__close {
display: block;
 position: absolute;
top: 20px;
width: 20px;
height: 12px;
padding: 8px;
cursor: pointer;
text-align: center;
font-size: 20px;
line-height: 12px;
 color: white;
text-decoration: none;

 }

.popup__close:hover {
color: #eea200;
}

 #framevideo {
 width: 100%;
 height: 100%;
 }

JS:

   var p = jQuery(".popup__overlay");
  jQuery(document).ready(function(){
   jQuery(".light").click(function() {
   p.css("display", "block");
  });
  p.click(function(event) {
 e = event || window.event;
 if (e.target == this) {
  jQuery(p).css("display", "none");
  }
  });

 });

jQuery(".light").click(function() {
 p.css("visibility", "visible").css("opacity", "1");
 });

 p.click(function(event) {
    e = event || window.event;
  if (e.target == this) {
  jQuery(p)
  .css("visibility", "hidden")
  .css("opacity", "0");
  toggleVideo("hide");
  }
 });

  jQuery(".popup__close").click(function() {
  p.css("visibility", "hidden").css("opacity", "0");
 toggleVideo("hide");
 });

Я создал всплывающее окно с видео, нажав кнопку с помощью jquery. Проблема в том, что видео по-прежнему оплачивается в фоновом режиме даже после закрытия всплывающего окна с видео нажатием кнопки закрытия (X). Ниже приведен код, любезно помогающий мне разобраться в этой проблеме.