ブートストラップモーダルが解除されたときにVimeoビデオを停止するには？

Question

私はVimeoモーダルを持っていて、何らかの努力の後で、モーダルが 'X'ボタンで閉じられるとビデオが停止するようになっています。しかし、私は 'X'ボタンに閉じる関数を置くので、ユーザーがボタンを使用するのではなくモーダルを閉じるためにビデオから離れてクリックすると、ビデオは再生を続けます。

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
</div> 

そして、ここでビデオを停止JavaScriptの関数である：ここで

は、私はonclickを持つstopVideo()関数を呼び出すHTMLがある

<script> 
function stopVideo(){ 
    var $frame = $('iframe#nofocusvideo'); 

    // saves the current iframe source 
    var vidsrc = $frame.attr('src'); 

    // sets the source to nothing, stopping the video 
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open 
    $frame.attr('src', vidsrc); 
} 
</script> 

だから、どのように私は機能を変更することができます特定の閉じるボタンに適用するのではなく、モーダルがフォーカスを失ってビデオから離れてしまうような場合に適用しますか？

私は初心者ですので、簡単に私に行ってください。前もって感謝します！

EDIT 1：

私は、次のようにスクリプトを変更しました：

<script> 
    function stopVideo(){ 
    var $frame = $('iframe#nofocusvideo'); 

    // saves the current iframe source 
    var vidsrc = $frame.attr('src'); 

    // sets the source to nothing, stopping the video 
    $frame.attr('src',''); 

    // sets it back to the correct link so that it reloads immediately on the next window open 
    $frame.attr('src', vidsrc); 
    } 

    $('#promo-video').on('hidden.bs.modal', function (e) { 
     stopVideo(); 
    }) 
</script> 

stopVideo()関数が呼び出されていません。私が間違っていることは何か考えていますか？

EDIT 2： ここで問題になっているモーダルのコードがあります：

<!-- VIDEO MODAL --> 
    <div class="modal fade" id="promo-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="stopVideo()"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
       </div> 
       <div class="modal-body"> 
        <div class="modal-video"> 
         <div class="embed-responsive embed-responsive-16by9"> 
          <iframe id="nofocusvideo" src="https://player.vimeo.com/video/180565514?api=1&player_id=vimeoplayer" name="vimeoplayer" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

<!-- End Video Modal --> 

Answer 1

が、私の問題を解決しました：

<script> 
     (function($) { 



function iframeModalOpen(){ 

     $('.modalButton').on('click', function(e) { 
      var src = $(this).attr('data-src'); 
      var width = $(this).attr('data-width') || 640; 
      var height = $(this).attr('data-height') || 360; 

      var allowfullscreen = $(this).attr('data-video-fullscreen'); 

      $("#promo-video iframe").attr({ 
       'src': src, 
       'height': height, 
       'width': width, 
       'allowfullscreen':'' 
      }); 
     }); 


     $('#promo-video').on('hidden.bs.modal', function(){ 
      $(this).find('iframe').html(""); 
      $(this).find('iframe').attr("src", ""); 
     }); 
    } 

    $(document).ready(function(){ 
     iframeModalOpen(); 
    }); 

    }) (jQuery); 
    </script> 

Answer 2

ここではデフォルトのブートストラップIDを使用するための作業コードです。なぜあなたのものが動作していないのかは分かりません。以下にはJavaScriptを変え

試行錯誤をたくさんした後

function stopVideo() { 
 
    var $frame = $('iframe#nofocusvideo'); 
 

 
    // saves the current iframe source 
 
    var vidsrc = $frame.attr('src'); 
 

 
    // sets the source to nothing, stopping the video 
 
    $frame.attr('src', ''); 
 

 
    // sets it back to the correct link so that it reloads immediately on the next window open 
 
    $frame.attr('src', vidsrc); 
 
} 
 

 
$('#myModal').on('hidden.bs.modal', function(e) { 
 
    stopVideo(); 
 
})

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

 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <iframe id="nofocusvideo" src="https://player.vimeo.com/video/182738685" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

私のために働く解決策は、モーダル内容をリロードします：

$("#modal-video").on("hidden.bs.modal", function() { 
     var url = $('#video-frame').attr('src'); 
     $('#video-frame').attr('src', ''); 
     $('#video-frame').attr('src', url); 
    });