Question

我有一个包含YouTube iframe视频的jquery模态。现在，我要的是有人单击x图标或关闭按钮或模态窗口外的任何位置时，当前它已关闭但视频仍在播放。因此，我希望/需要将iframe src重置为null或为空，以便在关闭模式时视频会停止。

我的问题是模式关闭，但视频继续播放。这是我的代码，第二部分是.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>

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

希望它可以解决您的问题。

在Jquery模式窗口上重置iframe src关闭

1 个答案: