Twitter Boostrap：モーダルウィンドウを再オープンした後にモーダルウィンドウが表示されない

Question

モーダルウィンドウで5つの異なるビデオを開く5つのリンクがある 次のコードはモーダルウィンドウでビデオを再生し、モーダルウィンドウが閉まっている。

しかし、同じビデオをもう一度開くと、モーダルウィンドウでビデオが無効になり、もう再生できなくなります。これのための修正はありますか？ここ

は、モーダルウィンドウコードとJavaScriptとフィドルのリンクが

MY FIDDLE

下にあるモーダル

<div class="modal fade video2 advSearchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog modal-lg" 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="exampleModalLabel">Video 2</h4> 
     </div> 
     <div class="modal-body"> 

     <div class="row"> 
      <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube"> 
      <div class="embed-responsive embed-responsive-16by9"> 

       <video class="embed-responsive-item" controls src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" type="video/mp4"> </video> 

      </div> 
      </div> 

     </div> 

     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <!-- <button type="button" class="btn btn-primary">Send message</button> --> 
     </div> 
    </div> 
    </div> 
</div> 

JS

$(document).ready(function() { 
    $(document).ready(function() { 
    $(".advSearchModal").on('hide.bs.modal', function(evt) { 
     var player = $(evt.target).find('video'), 
     vidSrc = player.prop('src'); 
     player.prop('src', ''); // to force it to pause 
     player.prop('src', vidSrc); 
    }); 
    }); 
}); 

Answer 1

私は停止するには、次のトリックを使用していますHTML5ビデオ。モーダルでビデオを一時停止（）し、currentTime = 0に設定します。

$(".advSearchModal").on('hide.bs.modal', function(evt) { 
    $(evt.target).find('video').get(0).pause(); 
    $(evt.target).find('video').get(0).currentTime = 0; 
}); 

currentTime = 0を設定すると、開始時のビデオ再生がモーダルになります。