Почему я не могу получить iFrame с видеоконтентом автозапуска для воспроизведения только при открытии модального всплывающего окна Magnific? - PullRequest
Новая
       14

Почему я не могу получить iFrame с видеоконтентом автозапуска для воспроизведения только при открытии модального всплывающего окна Magnific?

0 голосов
/ 27 апреля 2018

Есть проект, над которым я работаю, когда клиент перенес свой сайт на маркетинговую платформу HubSpot. Одной из проблем, которую мы пытались помочь им, является то, что их старая хостинговая платформа разрешила им ссылку на изображение / кнопку, которая открыла модальное окно с iFrame, которое содержит видео, настроенное для автозапуска.

Как вы можете сказать из этой промежуточной страницы , с большим количеством проб и ошибок, я смог заставить всплывающее окно работать с iFrame.

Проблема, с которой я сталкиваюсь, заключается в том, что контент iFrame, для которого задано автоматическое воспроизведение, запускается при загрузке страницы, а не при Запускать видео для успеха клиента .

Ниже приведена структура HTML, которая включает HUBL HubSpot для настраиваемых полей, которые можно редактировать на уровне страницы: 

    <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. Но я пытаюсь прокладывать себе путь.

...