Question

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

正如您可以从staging page看到的，经过大量的反复试验，我能够让弹出窗口与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的初学者。但我正试图通过各种方式。

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

0 个答案: