Остановить воспроизведение iframe видео при выходе из модального окна

У меня возникли проблемы с тем, как остановить воспроизведение iframe видео при закрытии модального окна. Я видел много ответов, упоминающих YouTube и использующих их API, но эти видеоролики не принадлежат YouTube. Я уже задал несколько вопросов по этому вопросу, например: Stop all playing iframe videos on click a link javascript. Я просто не понимаю, как включить это в мой код.Остановить воспроизведение iframe видео при выходе из модального окна

Вопрос

Как я могу остановить IFrame видео из игры, когда пользователь закрывает модальное окно. Чтобы закрыть каждое модальное окно, я использую <div class=close-animatedModal>.

Если это имеет значение, я использую Wordpress.

Test Page - http://johnmartinagency.com/test-page-2/

HTML

<a id=demo01 href=#animatedModal> <!-- This targets the specific modal --> 
     <div class=play-container><div class=play-button></div> 
     </div> 
    </a> 

<div class="mdl-card__title auto-insurance"> <!-- Google Material Design Lite Card --> 
    <h2 class=mdl-card__title-text>Auto Insurance Made Easy</h2> 

</div> 
<div class="mdl-card__actions mdl-card--border"> <a id=demo01-a href=#animatedModal class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Watch Video</a> <!-- The play button --> 

</div> 
<div class=video-length>(5:21)</div> 
</div> 
<div id=animatedModal> <!-- The Modal Container --> 
    <div class=modal__box> 
     <div class=close-animatedModal> <!-- Close modal ->> 
      <i class="fa fa-times fa-2x close-icon"></i> 
     </div> 
     <div class=h_iframe> <!-- The iframe --> 
      <img class=ratio src=http://placehold.it/16x9> 
      <iframe src="//fast.wistia.net/embed/iframe/rnx2undr9h?videoFoam=true" allowtransparency=true frameborder=0 scrolling=no class=wistia_embed name=wistia_embed allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen align=center></iframe> 
      <script src=//fast.wistia.net/assets/external/E-v1.js></script> 
     </div> 
    </div> 
</div> 
</div>

Javascript

Я использую animate.modal.js для модального анимации

<script src=//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js> </script> 
<script src="http://sogomarketingagency.com/wp-content/themes/Avada-Child-Theme/js/animatedModal.min.js?ver=4.1.1"></script> 
<script> 
$("#demo01, #demo01-a").animatedModal ({ 
    modalTarget:"animatedModal", 
    animatedIn:"zoomIn", 
    animatedOut:"bounceOut", 
    color:"rgba(0, 0, 0, 0.95)", 
    overflow:"scroll"}) 
</script>

источник

2015-08-03 AndrewH

, а затем, используя статический HTML для модальных окон пытаются создать динамичные и удалить, что HTML из модального окна при закрытии. Таким образом, вы сможете свести к минимуму код в одной функции, передав URL-адрес видео для использования и повторного использования, чтобы не открывать никакого видео. потому что по причине безопасности вы хотите иметь доступ к любому контенту iframe. –

Добавьте это в сценарий, в document готовой функции:

jQuery(function() { 
    jQuery().on("click", function() { 
    jQuery('iframe').contents().find('video').each(function() { 
     this.currentTime = 0; 
     this.pause(); 
    }); 
    }); 
});

источник

2015-08-05 15:28:26

Спасибо за ответ, я сменил код, но функция все еще не работает. Я получаю эту ошибку в консоли, «Неиспользуемая ошибка: ошибка синтаксиса, нераспознанное выражение: //fast.wistia.net/embed/iframe/rnx2undr9h». Я обновляю ссылку на сайт с тестовой страницей [http://johnmartinagency.com/test-page-2/](http://johnmartinagency.com/test-page-2/) – AndrewH

Несомненно @AndrewH Я глядя в нее. –

@AndrewH Где обработчик событий для '.close-animatedModal'? –

Это решение, кажется, работает.

Добавить этот JS после того как вы загрузили выше скрипт (непосредственно перед закрывающим тегом тела)

<script type="text/javascript"> 
    $('#myModal').on('hidden.bs.modal', function() { 
     var videos = $('#video'); 
     video.pause() 
    }); 
</script>

Accepted Answer is here

источник

2015-08-05 17:20:44

Остановить воспроизведение iframe видео при выходе из модального окна

ответ

Смежные вопросы