Сбросьте iframe src при закрытии модального окна Jquery - PullRequest
Новая
       23

Сбросьте iframe src при закрытии модального окна Jquery

0 голосов
/ 30 апреля 2019

У меня есть модальный jquery, который содержит видео iframe на YouTube.Теперь я хочу, чтобы кто-нибудь щелкнул значок x, кнопку закрытия или где-нибудь за пределами модального окна, в настоящее время оно закрывается, но видео продолжает воспроизводиться.Поэтому я хочу / нужно, чтобы iframe src был сброшен в ноль или пуст, чтобы видео останавливалось при закрытии модального окна.

Моя проблема - модальное закрытие, но видео продолжается.Вот код, который у меня есть, и вторая часть - это то, что не работает с классом .closeit

В моем файле php о 

        $product_youtubevideo_link ='abc123';
        <a class="productvideomodel" data-id="<?php echo "$product_youtubevideo_link";?>" data-toggle="modal" href="#productvidModal">Watch Video <i class='fa fa-play-circle-o' aria-hidden='true'></i></a>

В моем файле php нижнего колонтитула 

  <div id="productvidModal" class="modal fade" role="dialog">
     <div class="modal-dialog">
         <div class="modal-content">

         </div>
     </div>
  </div>
  require(['jquery'], function($) 
  {
       $('.productvideomodel').click(function(){
          var id = $(this).attr('data-id');
          $.ajax({url:"product_video_modal_ajax.php?vidid="+id,cache:false,success:function(result){
            $(".modal-content").html(result);
          }});
       });
       $('.closeit').click(function(e) {
           var id = '';
           $.ajax({url:"product_video_modal_ajax.php?vidid="+id,cache:false,success:function(result){
             $(".modal-content").html(result);
           }});
       });

  });

В моем файле product_video_modal_ajax.php 

<?php
   //youtube vid id
   $vidid = $_GET['vidid'];
?>
<div class="modal-header">
    <button type="button" class="closeit" data-dismiss="modal">&times</button>
    <h4 id="modalTitle" class="modal-title"></h4>
</div>
<div class="modal-body">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/<?php echo "$vidid";?>?autoplay=1&rel=0" id="productpage_video-iframe"></iframe>
</div>
<div class="modal-footer">
   <button type="button" class="btn btn-default closeit" data-dismiss="modal">Close</button>
</div>

1 Ответ

0 голосов
/ 30 апреля 2019

Вы можете сделать что-то вроде этого: 

$('.closeit').click(function(e) {
   ...
   $('#productpage_video-iframe').attr('src', ''); //replace #productpage_video-iframe with the id of your iframe or with a custom selector
});

Здесь вы можете найти рабочий образец. https://codepen.io/gventuri/pen/bJyrLX

Надеюсь, это решит вашу проблему.

...