Video

I happen to have a project where videos are inside modals, and enabled autoplay when the modal pops open, and video pausing when the user clicks outside of the modal or closes it. The video is also muted in my example by default as browsers such as Google Chrome tends to block media that isn't muted because it may annoy users.

        <div class="modal fade" id="modalBrecht" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content" style="background-color: transparent;">
    <div class="modal-header" style="background-color: white;">
        <h5 class="modal-title" id="exampleModalLabel"><strong>Brecht</strong> <i class="fas fa-chevron-right" style="padding-left: 1em;"></i> Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body" style="padding: 0;">
        <div class="row nm" style="width: 100%;">
            <video id="videoBrecht" class="video-fluid" loop muted playsinline poster="video_thumbnail/thumbnail.jpg" controls="true">
            <source src="videoname.mp4" controls="true" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="modal-footer icbg" style="border-top: none; padding: 0.4rem;">
    </div>
    </div>
</div>
</div>

With the following script:

<script>
//Play
$('#modalBrecht').on('shown.bs.modal', function () {
  $('#videoBrecht')[0].play();
  $("#videoBrecht").removeAttr("muted");
})
//Pause
  $('#modalBrecht').on('hidden.bs.modal', function () {
  $('#videoBrecht')[0].pause();
})
</script>

I hope this will help you.