What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

popup video problem


New member
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>

.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;   

  midClick: true,
  mainClass: 'custom-popup-class'

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