title: how stop html5 video when bootstrap modal is closed and replay again when click play button
body: <p>I have a page with three html5 videos that I want to be played in a  popup modal when the user click that 'play' button.I have three modal with three id,like myModal1,myModal2,and myModal3!and video file comes from server dynamically. I searched and tried many solutions but have not found one which works correctly for me! Does anybody have an idea of a solution for my problem which will allow: </p>
  
  <ul>
  <li>when user click on a play button, that specific bootstrap modal video loads and plays.</li>
  <li>when user closes the modal, the video will stop.</li>
  <li>when user re-selects a video it could be played again.</li>
  </ul>
  
  <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>&lt;script&gt;
  $( document ).ready(function() {
   
    $('.winnr-ply').on('click', function(){
   var video = document.getElementById('lotto');
  var source = document.createElement('source');
  
  source.setAttribute('src', 'video/v3.mp4');
  
  video.appendChild(source);
  video.play();
  
  $(".close").click(function() {  
      video.pause();
  
     source.setAttribute('src', ''); 
  
  
  
  }, 3000); 
   });
  
   
  });
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="winnr-ply winner-videos"  data-toggle="modal" data-target="#myModal2"&gt;play video&lt;/button&gt;
  
  &lt;div id="myModal2" class="modal fade" tabindex="-1" role="dialog"&gt;
                            &lt;div class="modal-dialog my-dialog" role="document"&gt;
                              &lt;div class="modal-content winner-v"&gt;
                                &lt;div class="modal-header lg-header"&gt;
                                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                                  &lt;/button&gt;
                                &lt;/div&gt;
                                &lt;div class="modal-body lg-body"&gt;
                                      &lt;video id="video1" width="500px" height="400px" controls &gt;
                                       &lt;source src="video/v3.mp4" type="video/mp4"&gt;
                                      &lt;/video&gt;
                                &lt;/div&gt;
                                
                              &lt;/div&gt;&lt;!-- /.modal-content --&gt;
                            &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
           &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>