Javascript 在模式外单击后,在后台播放视频

Javascript 在模式外单击后,在后台播放视频,javascript,php,html,iframe,bootstrap-modal,Javascript,Php,Html,Iframe,Bootstrap Modal,我在模型中有一个iframe,它在模型中播放视频,但当我在模型外单击时。模式框关闭,但在后台播放视频 我的代码: <div class="modal fade bd-example-modal-lg modalsize col-9 col-xs-12" id="mysliderVideo1" style="padding-top: 80px;"> <div class="modal-dialog modal-lg"> <iframe class=

我在模型中有一个iframe,它在模型中播放视频,但当我在模型外单击时。模式框关闭,但在后台播放视频

我的代码:

<div class="modal fade bd-example-modal-lg modalsize col-9 col-xs-12" id="mysliderVideo1" style="padding-top: 80px;">
    <div class="modal-dialog modal-lg">
      <iframe class="video_container embed-responsive-item v_responsive"  height="50"  src="https://youtube.com/embed/<?php echo $page_info[0]['link1']; ?>?rel=0&modestbranding=1&autohide=1&showinfo=0&controls=1&autoplay=1" frameborder="0"  allow="autoplay" allowfullscreen></iframe>
    </div>
</div>

 <section id="gallery" class="bg-lighter">
  <div class="container-fluid pt-70 pb-0">
    <div class="section-content">
      <div class="row">
        <div class="col-md-12">
         <div id="grid" class="gallery-isotope grid-4 gutter clearfix">

       <?php if(!empty($page_info[0]['link1'])){ ?>
       <div class="gallery-item photography" onclick='video_link("<?php echo $page_info[0]['link1']?>",)'>
           <div class="price pt-30">
                <h5 class="text-uppercase letter-space-2"></h5>
           </div>
         <div class="thumb galerryVideoCopy inset">
        <img src="<?php echo 'http://img.youtube.com/vi/'.$page_info[0]['link1'].'/hqdefault.jpg' ?>" data-toggle="modal" data-target="#mysliderVideo1" />
        </div>
        </div>
           <?php } ?>
    </div>
  </div>
</div>
</div>
</div>
</div>
</section>  

试试这个:

$('.modal').on('hidden.bs.modal', function () {
    $('.video_container').attr({
      src: '', 
    });
});

希望获得帮助。

如果您单击退出
modal
它将终止模态视图,但您的
HTML
元素仍存在于后台。所以当你关闭你的模式。您还需要强制停止当前的视频播放
$('.modal').on('hidden.bs.modal', function () {
    $('.video_container').attr({
      src: '', 
    });
});