javascript - 为什么我不能让带有自动播放视频内容的 iFrame 仅在 Magnific Popup 模式打开时播放？

Question

我正在开展一个项目，客户将他们的网站移至 HubSpot 营销平台。我们一直试图帮助他们解决的问题之一是他们的旧托管平台允许他们访问一个图像/按钮链接，该链接打开一个带有 iFrame 的模式，其中包含一个自动播放的视频。

从这个暂存页面可以看出，经过大量试验和错误，我能够让弹出窗口与 iFrame 一起使用。

我遇到的问题是设置为自动播放的 iFrame 内容在页面加载时开始，而不是在选择“启动客户成功视频”按钮时开始。

这是当前的 HTML 结构，其中包括 HubSpot 的 HUBL，用于可以在页面级别编辑的自定义字段：

    <div class="popup-iframe-block clearfix">
  <div class="popup-iframe-block-content">
    <button href="#popup-iframe-modal" class="hs-button primary open-popup-link" role="button">{% inline_text field="button_text" value="{{ module.button_text }}" %}</button>
  </div>
</div>
<div id="popup-iframe-modal" class="popup-iframe-modal mfp-hide">
    <div class="popup-iframe-modal-content"><iframe src="{{ module.iframe_url }}" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" scrolling="no" onload="resize(this)"></iframe></div>
</div>

这是CSS样式：

.mfp-bg { background-color: #000000; opacity: 0.5; }
.mfp-close-btn-in .mfp-close { color: #000000; opacity: 0.5; }
.mfp-close-btn-in .mfp-close:hover { opacity: 1.0; }
.popup-iframe-block-content { text-align: center; }
.popup-iframe-block-content .hs-button.primary, .popup-iframe-block-content input[type="button"] { background-color: #001929; color: #ffffff; padding: 0.7em 1.25em; border-radius: 10px; text-transform: uppercase; font-weight: 700; font-family: Montserrat,sans-serif; font-size: 125%; border: none; margin-top: 0; }
.popup-iframe-block-content .hs-button.primary:hover, .popup-iframe-block-content input[type="button"]:hover { background-color: #86bd4a; padding: 0.7em 1.25em; border: none; }
.popup-iframe-modal-content { background-color: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,.5); border-radius: 8px; }
.popup-iframe-modal-content iframe { width: 100%; height: 558px; border: 0px none; margin-top: 1%; }

这是正在使用的Javascript：

$(document).ready(function() {
  $('.open-popup-link').magnificPopup({
          type:'inline',
          midClick: true
  });
});

任何帮助将不胜感激，特别是因为我认为自己是 Javascript 的初学者。但我正在努力解决问题。

标签： javascriptiframemagnific-popuphubspot