モーダルを終了するときにYouTubeビデオを停止する

Question

ここに私のマークアップです。私はモーダルを閉じるときにビデオが再生を停止させるために何をする必要があるのか​​分かりません。それはクロムでうまく再生を停止しますが、Firefoxでは動画はバックグラウンドで再生し続けます。

<!-- 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-body"> 

      <iframe id="iframeYoutube" width="854" height="480" src="https://www.youtube.com/embed/TFpFJeWOvZg?rel=0" frameborder="0" allowfullscreen></iframe> 

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

<script> 
    $(document).ready(function(){ 
    $("#myModal").on("hidden.bs.modal",function(){ 
    $("#iframeYoutube").attr("src","#"); 
    }) 
}) 

function changeVideo(vId){ 
    var iframe=document.getElementById("iframeYoutube"); 
    iframe.src="https://www.youtube.com/embed/"+vId; 

    $("#myModal").modal("show"); 
} 
</script> 

Answer 1

私はページをクリックするボタンを一つ持っていると私はあなたのコードを適応させる方法がわからない場合は、共有コードは素晴らしい作品

$(document).ready(function(){ 
 
    /* Get iframe src attribute value i.e. YouTube video url 
 
    and store it in a variable */ 
 
    var url = $("#cartoonVideo").attr('src'); 
 
    
 
    /* Assign empty url value to the iframe src attribute when 
 
    modal hide, which stop the video playing */ 
 
    $("#myModal").on('hide.bs.modal', function(){ 
 
     $("#cartoonVideo").attr('src', ''); 
 
    }); 
 
    
 
    /* Assign the initially stored url back to the iframe src 
 
    attribute when modal is displayed again */ 
 
    $("#myModal").on('show.bs.modal', function(){ 
 
     $("#cartoonVideo").attr('src', url); 
 
    }); 
 
});

.bs-example{ 
 
    \t margin: 20px; 
 
    } 
 
    .modal-content iframe{ 
 
     margin: 0 auto; 
 
     display: block; 
 
    }

<link rel="stylesheet" href="https://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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="bs-example"> 
 
    <!-- Button HTML (to Trigger Modal) --> 
 
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a> 
 
    
 
    <!-- Modal HTML --> 
 
    <div id="myModal" class="modal fade"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
        <h4 class="modal-title">YouTube Video</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>