JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<ul class="fa-ul">

  <li><i class="fa fa-video-camera" aria-hidden="true"></i><a href="#" data-toggle="modal" data-target=".video2"> Video 2</a></li>
  <li><i class="fa fa-video-camera" aria-hidden="true"></i><a href="#" data-toggle="modal" data-target=".video3"> Video 3</a></li>
  <li><i class="fa fa-video-camera" aria-hidden="true"></i><a href="#" data-toggle="modal" data-target=".video4"> Video 4</a></li>
  <li><i class="fa fa-video-camera" aria-hidden="true"></i><a href="#" data-toggle="modal" data-target=".video5"> Video 5</a></li>
</ul>


<!-- end row -->





<!-- Modal 2 -->
<div class="modal fade video2 advSearchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Video 2</h4>
      </div>
      <div class="modal-body">

        <div class="row">
          <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">
            <div class="embed-responsive embed-responsive-16by9">

              <video class="embed-responsive-item" controls src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" type="video/mp4"> </video>

            </div>
          </div>

        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Send message</button> -->
      </div>
    </div>
  </div>
</div>


<!-- End Modal...

JavaScript

/**
 $(window).load(function(){
     jQuery('.advSearchModal').on('hidden.bs.modal', function (e) {
         jQuery('.advSearchModal video').attr("src", jQuery(".advSearchModal video").removeAttr("src"));
     });
});
  
    
   
 $(document).ready(function() {   
    $('.advSearchModal').on('hidden.bs.modal', function () {
    var src = $(this).find('video').attr('src');
    $(this).find('video').attr('src', '');
    $(this).find('video').attr('src', src);
    });
});
**/
   $(document).ready(function(){ 
    $(".advSearchModal").on('hide.bs.modal', function(evt) {
        $(evt.target).find('video').get(0).pause();
        $(evt.target).find('video').get(0).currentTime = 0; 
    });
       
    }); 


$(document).ready(function() {
 
   $(".advSearchModal").draggable({
      handle: ".modal-header"
  });
});