モーダルが閉じられているときにiframeでビデオの再生を停止する

Question

「ビデオを見る」というテキストの再生画像があります。クリックすると、私が入れたビデオを再生するためのブートストラップモーダルウィンドウが開きます。 。私がこれで抱えている問題は、ビデオを再生して再生中に画面を終了するときです。ビデオはバックグラウンドで再生し続けます。もう一度[動画を見る]リンクをクリックすると、以前から停止していた場所の動画が再生されます。

モーダルウィンドウが閉じているときにビデオを停止する必要があります。次に、「ビデオを見る」リンクをクリックすると、最初からビデオを再生する必要があります。私はまだこれに新しいですし、これを行う方法がわかりません。私はこれをどのように達成することができるか誰も知っている？

<div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal"> 
    <img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video 
</div> 

<div id="myModal" class="modal fade" role="dialog" tabindex='-1'> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <div class="embed-responsive embed-responsive-16by9"> 
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 

     </div> 
    </div> 
</div> 

Answer 1

私はそれをt彼はその@Leoをリンクしています。リンクがクリックされるたびにフレームをリロードしたため、速度が遅くなりました。試した@guillesalazar溶液Twitter Bootstrap Modal stop Youtube videoからそれは完全に働いた。これが私が使用した解決策でした。

$("#myModal").on('hidden.bs.modal', function (e) { 
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src")); 
}); 

Answer 2

あなただけhidden.bs.modalイベントのビデオを停止する必要があります。ここでは

$('#myModal').on('hidden.bs.modal', function() { 
    player.stopVideo(); 
    // or jQuery 
    $('#playerID').get(0).stopVideo(); 
    // or remove video url 
    $('playerID').attr('src', ''); 
}) 

はあなたが何をする必要があるかと（等しくない場合は）非常に似ています。http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal

彼らが行いますiframe APIを使用しないので、モーダルを閉じるたびに動画URLが削除されます。.attr('src', '');

Answer 3

よくiframeのsrcを削除して、もう一度putを実行してください。

<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe> 
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span> 

今

jQueryの一部

function stopVideo(id){ 
    var src = $j('iframe.'+id).attr('src'); 
    $j('iframe.'+id).attr('src',''); 
    $j('iframe.'+id).attr('src',src); 

}