Reset iframe src on Jquery modal window close

Question

I have a jquery Modal that contains a youtube iframe video. Now ehrn I want is when someone clicks the x icon or the close button or anywhere outside the modal window currently it closes but the video keeps playing. So I want/need the iframe src to be reset to null or empty so the video will stop when you close the modal.

My issue is the modal closes but the video continues on. Here is the code I have and the second part is whats not working the part with the class .closeit

In my about php file

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

In my footer php file

  <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);
           }});
       });

  });

In my product_video_modal_ajax.php file

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

Wendigo Wendigo · Accepted Answer · 2019-04-30T15:06:29

You can do something like this:

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

Here you can find a working sample. https://codepen.io/gventuri/pen/bJyrLX

Hope it solves your issue.

Reset iframe src on Jquery modal window close

1 Answers