title: Bootstrap Modal keep playing audio after video window close in Firefox
body: <p>The following is the full testing code. The example is running on
  <a href="http://public.eitan.ac.il/modal/modal-video.html" rel="nofollow noreferrer">http://public.eitan.ac.il/modal/modal-video.html</a></p>
  
  <p>I am trying to run a youtube video in a pop up window using Modal, but after closing the window, in Firefox the audio keep on playing.  In chrome its working OK.</p>
  
  <p>Any solutions? 10x</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var mobileDetect = new MobileDetect(window.navigator.userAgent);
  
  /*
  $(document).ready(function(){ 
   $("#myModal").on('hidden.bs.modal', function (e) { $("#myModal #iframeYoutube").attr("src", $("#myModal   #iframeYoutube").attr("src")); 
  
   }); 
  */
  
   $(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+"?autoplay=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0";
  
  
   if (mobileDetect.mobile()) {
    window.location = "https://www.youtube.com/watch?v=" + vId;
   return;
     }
  
      $("#myModal").modal("show");
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
   &lt;link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;
   &lt;link type="text/css" rel="stylesheet" href="modal.css" /&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;script type='text/javascript'src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'&gt;&lt;/script&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.2/mobile-detect.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;a href="javascript:changeVideo('e80BbX05D7Y')"&gt;&lt;button class="main-btn"&gt;Watch&lt;/button&gt;&lt;/a&gt;
    
  &lt;!-- Modal --&gt;
  
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
     &lt;div class="modal-content"&gt;
  
  &lt;div class="modal-header"&gt;
   &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;a href="#"&gt;&lt;span aria-  hidden="true" style="color:white"&gt;&amp;times;&lt;/span&gt;&lt;/a&gt;&lt;/button&gt;
           &lt;/div&gt;
  
      &lt;div class="modal-body"&gt;
       &lt;iframe id="iframeYoutube" width="700" height="394" src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;    
      &lt;/div&gt;
     &lt;/div&gt; 
    &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>