<div class="container">


  <div class="gallery">
    <img src="https://dummyimage.com/200x100/000/fff&text=A" alt="" data-toggle="modal" data-bigimage="https://dummyimage.com/2000x1000/000/fff&text=A" data-target="#myModal" class="img-fluid">
    <img src="https://dummyimage.com/200x100/ccc/000&text=B" alt="" data-toggle="modal" data-bigimage="https://dummyimage.com/2000x1000/000/fff&text=B"  data-target="#myModal" class="img-fluid">
    <img src="https://dummyimage.com/200x100/fff/000&text=C" alt="" data-toggle="modal" data-bigimage="https://dummyimage.com/2000x1000/000/fff&text=C"  data-target="#myModal" class="img-fluid">
    <img src="https://dummyimage.com/200x100/ccc/000&text=D" alt="" data-toggle="modal" data-bigimage="https://dummyimage.com/2000x1000/000/fff&text=D"  data-target="#myModal" class="img-fluid">
    <img src="https://dummyimage.com/200x100/fff/000&text=E" alt="" data-toggle="modal" data-bigimage="https://dummyimage.com/2000x1000/000/fff&text=E"  data-target="#myModal" class="img-fluid">
  </div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      
      <div class="modal-body">

       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>        

                <img src="//media.tenor.com/images/556e9ff845b7dd0c62dcdbbb00babb4b/tenor.gif" alt="" id="image" class="img-fluid">

        
        
      </div>

    </div>
  </div>
</div> 
  
  
  
</div>


body {margin:2rem;}

.modal-dialog {
      max-width: 800px;
      margin: 30px auto;
  }



.modal-body {
  position:relative;
  padding:0px;
  min-height:400px;
  background:#ccc;
}




.close {
  position:absolute;
  right:-30px;
  top:0;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
}

#image {
  min-height:200px;
}
$(document).ready(function() {

// Gets the video src from the data-src on each button
var $imageSrc;  
$('.gallery img').click(function() {
    $imageSrc = $(this).data('bigimage');
});
console.log($imageSrc);
  
  
  
// when the modal is opened autoplay it  
$('#myModal').on('shown.bs.modal', function (e) {
    
// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get

$("#image").attr('src', $imageSrc  ); 
})
  
  
// reset the modal image
$('#myModal').on('hide.bs.modal', function (e) {
    // a poor man's stop video
    $("#image").attr('src',''); 
}) 
    
    


  
  
// document ready  
});


External CSS

  1. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/master/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.js