javascript - 点击关闭按钮后，点击 Youtube 视频不关闭

Question

我有一个视频想在网站上向用户展示，我在他们点击的地方创建了一个按钮，它在弹出窗口中显示了一个 youtube 视频，但是当我关闭它时，它仍然在选项卡中显示“播放音频”你仍然可以听到视频。当他们单击 X 或其他任何地方(他们也可以通过单击任何地方关闭它)时，我如何才能真正停止视频及其音频。

   $(document).ready(function() {
  $('#headerVideoLink').magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
  });         
});

   

 #headerPopup{
  width:75%;
  margin:0 auto;
}

#headerPopup iframe{
  width:100%;
  margin:0 auto;

}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"/>

 <a href="#headerPopup" id="headerVideoLink" target="_blank" class="btn btn-white btn-outline-white px-4 py-3 popup-modal"><span class="icon-play mr-2"></span>Watch Video</a></p>

      <div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
      <iframe class="embed-responsive-item" width="854" height="480" src="https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div> 

任何帮助都意义重大，谢谢!

Answer 1

如果您使用 MagnificPopup 插件的 iframe 内容类型怎么办？ 所以它看起来像这样:

$(document).ready(function () {
  $('#headerVideoLink').magnificPopup({
    type: 'iframe',
    midClick: true,
    items: {
      // HTML markup of popup, `mfp-close` will be replaced by the close button
      markup: '<div class="mfp-iframe-scaler">' +
        '<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">' +
        '<iframe class="embed-responsive-item" width="854" height="480" frameborder="0" allow="autoplay;     encrypted-media" allowfullscreen></iframe>' +
        '</div>',
      patterns: {
        youtube: {
          // URL that will be set as a source for iframe.
          src: 'https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1'
        }
      },
      // Templating object key. First part defines CSS selector, second attribute.
      // "iframe_src" means: find "iframe" and set attribute "src".
      srcAction: 'iframe_src',
    }
  });
});

https://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type

或者尝试使用您的原始 Javascript 清除 iframe 源:

$(document).ready(function () {
  $('#headerVideoLink').magnificPopup({
    type: 'inline',
    midClick: true,
    callbacks: {
      open: function () {
        // Will fire when this exact popup is opened
        // this - is Magnific Popup object
      },
      close: function () {
        // Will fire when popup is closed
        $('#headerPopup > iframe').attr('src', '');
      }
    }
  });
});