在 Jquery 模态窗口关闭时重置 iframe src

Question

我有一个包含 youtube iframe 视频的 jquery Modal。现在我想要的是当有人单击 x 图标或关闭按钮或当前它关闭但视频继续播放的模式窗口之外的任何地方时。因此，我希望/需要将 iframe src 重置为 null 或为空，以便在您关闭模式时视频将停止。

我的问题是模式关闭但视频继续播放。 这是我拥有的代码，第二部分是类 .closeit 中不起作用的部分

在我的 about 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>

Answer 1

你可以这样做：

$('.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

希望它能解决你的问题。