<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <li class="col-sm-3" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false"> <div class="thumbnail"> <div class="help_video"> <video id="1" controlsList="nodownload"> <source src="~/Content/helpvideos/2%20admission.mp4" type="video/mp4" /> </video> <div class="overlay"> <img src="https://image.flaticon.com/icons/svg/26/26025.svg"> </div> </div> <div class="caption"> <h3>Admission</h3> </div> </div> </li> <li class="col-sm-3" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false"> <div class="thumbnail"> <div class="help_video"> <video id="1" controlsList="nodownload"> <source src="~/Content/helpvideos/2%20admission.mp4" type="video/mp4" /> </video> <div class="overlay"> <img src="https://image.flaticon.com/icons/svg/26/26025.svg"> </div> </div> <div class="caption"> <h3>Admission</h3> </div> </div> </li> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <video controls="controls" id="video" controlsList="nodownload" preload="none"> <source src="~/Content/helpvideos/2%20admission.mp4" type="video/mp4" /> </video> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" onclick="StopVideo()" data-dismiss="modal">Close</button> </div> </div> </div> </div>

$(document).ready(function () { $('video').on('click', function () { var video = $(this).attr('src'); $('#myModal').on('show.bs.modal', function () { $(".img-responsive").attr("src", video); }); }); }); function StopVideo() { var vid3 = document.getElementById("video"); vid3.pause(); }