SO49684134

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    body {
      background: #000;
      position: relative;
    }
    
    .mfp-container {
      opacity: 0;
      transition: 1s;
    }
    
    .mfp-content {
      position: relative;
      background: #000;
      width: 640px
    }
    
    .mfp-content p {
      position: absolute;
      right: 0;
    }
    
    .active {
      opacity: 1;
      transition: 1s;
    }
    
    #toggle {
      width: 10ch;
      height: 4ex;
      position: absolute;
      right: calc(50% - 5ch);
      top: calc(50% - 2ex);
      z-index: 1;
      outline: 15px solid rgba(255,0,0,0.7);
      color:tomato;
    }
  </style>
</head>

<body>

  <div class="mfp-container" id="video1">
    <div class="mfp-content">
      <p>
        <img src="https://batmin.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close1">
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/q_dv3PoUAM0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <button id='toggle' type='button'>ON / OFF</button>
  <div class="mfp-container active" id="video2">
    <div class="mfp-content">
      <p>
        <img src="https://batmin.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close2">
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/8GpbJGZ7LEs?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    $('#toggle').on('click', function() {
      $('.mfp-container').toggleClass('active');
    })
    $('.mfp-content p').on('click', function() {
      var MFP = $(this).closest('.mfp-container');
      var YT = $(this).next('iframe');
      MFP.removeClass('active');
      YT[0].contentWindow.postMessage(`{
    	"event":"command",
    	"func":"${'stopVideo'}",
    	"args":""
    }`, '*');
    });
  </script>
</body>

</html>

// Code goes here

/* Styles go here */