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

Posted 2023-05-09

【中文标题】在 Jquery 模态窗口关闭时重置 iframe src

【英文标题】：Reset iframe src on Jquery modal window close

【发布时间】：2019-09-19 05:54:18

【问题描述】：

我有一个包含 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   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】：

你可以这样做：

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

希望它能解决你的问题。

【讨论】：

这似乎对我不起作用？？可能是因为实际的模型内容代码在一个单独的 php 文件中，该文件通过 ajax 调用。

网上有例子吗？

见我上面的代码。我列出了所有代码的所有文件

我已经用你的例子更新了 codepen。如果它适合你，请告诉我：codepen.io/gventuri/pen/bJyrLX