popup video problem

[HunT47]

Hi, I'm new to all JS and i use Popup Magnific, i did a pop-up video, the problem is that it keeps running in the background after closing, i tried to do something to make it stop, but I got into trouble with it and i don't understand how to fix it.
i would love if anyone could help.

Attaching my code:

<div class="col-md-3">
                    <div class="video-wrapper">
                          <div class="play">
                              <a href="#popup1" class="open-popup-link"><img src="img/3D/thumbnails/thumb1.jpg" class="img-fluid">
                               <img src="img/play.png" class="play-btn"></a>
                                <div id="popup1" class="mfp-hide">
                                    <div class="box-video">
                                        <video source src="img/3D/videos/birthday1.mp4" type="video/mp4" width="100%" controls preload></video>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>

.custom-popup-class .mfp-container {
  padding-top: 40px;
  padding-bottom: 40px;
}

.custom-popup-class .mfp-content {
  width: 100%;
  max-width: 750px;
}

#popup1 {
  width: 100%;
  height: 0;
  overflow: hidden;
  /* This is scale ratio */
  padding-top: 56.25%;
}

#popup1 .mfp-close {
  top: -47px;
  color: #FFF;
  text-align: right;
  right: 1px;
  font-size: 40px;   
}

$('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true,
  mainClass: 'custom-popup-class'
});

$("#popup").on('hidden.bs.modal', function (e) {
    $("#mpopup iframe").attr("video", $("#popup iframe").attr("video"));
    $.close function();
});