title: Video with autoplay in a Bootstrap modal with a stop when the modal is closed
body: <p>I read a lot of similar posts but didn't find the right solution for my project.</p>
  
  <p>I would like to let the user show/hide the bootstrap modal with a simple <code>&lt;a&gt;</code> balise. It's a Youtube iframe with an autoplay=1. </p>
  
  <p>First problem is that when the page load, the video is launching and we can hear the sound but of course cannot see the video inside the bidding modal. Second problem, I need to stop the video when the user closes the modal with the cross or just by clicking outside the modal.</p>
  
  <p>Here is a online demo : <a href="http://bp-design.fr/Redacteur/home.html" rel="nofollow">See live demo</a></p>
  
  <p>Here is my code, I'm using Bootstrap 3+ :</p>
  
  
  
  <pre><code>&lt;div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button aria-hidden="true" class="close" data-dismiss="modal" type="button"&gt;×&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the JS :</p>
  
  <pre><code>&lt;script&gt;
    $('#myModal').on('show', function () {
      $('div.modal-body').html('&lt;iframe width="100%" height="360" src="https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;');
    });
    $('#myModal').on('hide', function () {
      $('div.modal-body').html('');
    });
  &lt;/script&gt;
  </code></pre>