暫停視頻模式點擊外部模態

我想暫停視頻，當用戶點擊外部模態區域時，暫停工作只有當用戶點擊關閉按鈕。我不想在屏幕上暫停視頻。暫停視頻模式點擊外部模態

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

暫停視頻模式點擊外部模態

回答

相關問題