暂停视频模式点击外部模态

我想暂停视频，当用户点击外部模态区域时，暂停工作只有当用户点击关闭按钮。我不想在屏幕上暂停视频。暂停视频模式点击外部模态

autoPlayYouTubeModal(); 
 

 
    //FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG 
 
    function autoPlayYouTubeModal() { 
 
     var trigger = $("body").find('[data-toggle="modal"]'); 
 
     trigger.click(function() { 
 
      var theModal = $(this).data("target"), 
 
       videoSRC = $(this).attr("data-theVideo"), 
 
       videoSRCauto = videoSRC + "?autoplay=1"; 
 
      $(theModal + ' iframe').attr('src', videoSRCauto); 
 
      $(theModal + ' button.close').click(function() { 
 
       $(theModal + ' iframe').attr('src', videoSRC); 
 
      }); 
 
     }); 
 
    }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 

 
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://techslides.com/demos/sample-videos/small.mp4">VIDEO</a> 
 

 
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-body"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
       <div> 
 
        <iframe width="100%" height="350" src=""></iframe> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

下面是示例工作fiddle

来源

2016-08-15 kuchar

这可以尝试

$('#videoModal').on('hidden.bs.modal', function (e) { 
     $('#videoModal .close').trigger('click') 
     })

来源

2016-08-15 07:18:59

暂停视频模式点击外部模态

回答

相关问题