title: How can I launch and close jQuery Twitter Bootstrap Modal with a YouTube video?
body: <p>I need a simple demo of how to launch and close a YouTube video in a <a href="http://twitter.github.com/bootstrap/javascript.html#modals" rel="noreferrer">Twitter Bootstrap Modal</a> from JavaScript (rather than an anchor tag click).</p>
  
  <p>So far I can launch it just fine, but on close it keeps playing in the background.</p>
  
  <p>Here's my html:</p>
  
  <pre><code>&lt;div id="myModalThumbnail"&gt;&lt;img src="http://placehold.it/250x150&amp;text=Video%20Thumbnail"&gt;
  &lt;/div&gt;
  
  &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;iframe width="520" height="390" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$('#myModalThumbnail').click(function () {
      var src = 'http://www.youtube.com/v/KVu3gS7iJu4&amp;amp;rel=0&amp;amp;autohide=1&amp;amp;showinfo=0&amp;amp;autoplay=1';
      $('#myModal').modal('show');
      $('#myModal iframe').attr('src', src);
  });
  </code></pre>
  
  <p>​
  And a <a href="http://jsfiddle.net/VtKS8/5/" rel="noreferrer">jsfiddle</a>: <a href="http://jsfiddle.net/VtKS8/5/" rel="noreferrer">http://jsfiddle.net/VtKS8/5/</a></p>
  
  <p>What next?</p>