0

There is a project I am working on where a client moved their site to the HubSpot Marketing platform. One of the issues that we have been trying to help them address is their old hosting platform allowed for them to an image/button link that opened a modal with an iFrame that contains a video set to autoplay.

As you can tell from this staging page, with lots of trial and error, I was able to get the popup working with the iFrame.

The problem I am running into, is the iFrame content that is set to autoplay starts on page load versus when Launch Customer Success Video button is selected.

Here is the HTML structure currently in place, which includes HubSpot's HUBL for custom fields that can be edited at page level:

    <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>

Here is the CSS styles:

.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%; }

Here is the Javascript being used:

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

Any help would be greatly appreciated, especially since I consider myself a beginner when it comes to Javascript. But I am trying to work my way through things.

Chris Davis
  • 1
  • the problem may be that you call resize on load of the iframe and not on popup open. – jcubic Apr 27 '18 at 18:54
  • Can you create the iframe (I'm assuming hidden?) without a src="" path and then when .open-popup-link is clicked, but before you call .magnificPopup(), add in the appropriate path to the iframe's src? – Doug Apr 27 '18 at 18:54

0 Answers0