title: Bootstrap 3 and Youtube in Modal
body: <p>I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. It works, but I can't click on any buttons in the Youtube video. </p>
  
  <p>Any help on this?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div id="link"&gt;My video&lt;/div&gt;
  
  &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&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="400" height="300" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;window.jQuery || document.write('&lt;script src="js/jquery-1.10.1.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $('#link').click(function () {
          var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;amp;autoplay=1';
          $('#myModal').modal('show');
          $('#myModal iframe').attr('src', src);
      });
  
      $('#myModal button').click(function () {
          $('#myModal iframe').removeAttr('src');
      });
  &lt;/script&gt;
  </code></pre>