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

或者尝试使用原始Java脚本清除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', '');
      }
    }
  });
});

点击YouTube视频后，我点击关闭按钮后未关闭

1 个答案: