如何通过单击关闭关闭模式时停止播放 Vimeo答案

【问题标题】：How to stop Vimeo from playing when modal is closed by clicking off如何通过单击关闭关闭模式时停止播放 Vimeo
【发布时间】：2017-02-24 18:53:41
【问题描述】：

我有一个嵌入到模式中的 Vimeo。当我单击“关闭”按钮时，它会停止播放视频。但是当我点击模型时它不会停止播放视频（这会导致模式关闭并且视频在后台播放）。

我尝试了一些类似问题的答案，但似乎无法让它们为我工作。我对 JS 相当陌生，因此不胜感激。

那么，当模式关闭时（无论是通过单击关闭按钮还是通过关闭按钮），我如何让视频停止？

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="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-5">
  <a href="#" class="btn-gs btn-gs-white btn-gs-lg" data-toggle="modal" data-target="#videoModal" data-theVideo="https://player.vimeo.com/video/118446482" id="video">
    <i class="fa fa-video-camera"></i> Intro 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>
</div>

【问题讨论】：

我认为this 是您要找的。span>
不完全是我希望得到的——但它有效。谢谢

标签： javascript jquery twitter-bootstrap video

【解决方案1】：

使用hide.bs.modal 事件，而不是检查何时单击模式关闭按钮。工作解决方案

(function(){
  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).on('hidden.bs.modal', function (e) {
		$(theModal + ' iframe').attr('src', videoSRC);
	});	  
	  
  });
}())

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="col-md-5">
  <a href="#" class="btn-gs btn-gs-white btn-gs-lg" data-toggle="modal" data-target="#videoModal" data-theVideo="https://player.vimeo.com/video/118446482" id="video">
    <i class="fa fa-video-camera"></i> Intro 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>
</div>	
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

【讨论】：