How to stop video when close modal html5

Question

when i close the modal the video is still playing on the background. i try to solve it but its not work. i think my script is not true but i didn't know what wrong with script.

<script>
    function ShowData(value) {
        document.getElementById("linkVideo").setAttribute('src', value);
        $('#modalVideo').modal('show');
    }
    
</script>

and my video body

<div class="swiper-slide rounded container swiper-shadow" onclick="ShowData('my link video');">
                            <div class="item-heading">
                                <p class="text-truncate mb-0">
                                    2. my video
                                </p>
                                <br>
                                <br>
                                <br />
                                <p>
                                    <small>by</small>
                                    <small></small>
                                </p>
                            </div>
                            <div>
                                <img class="card-img-bottom" src="~/app-assets/images/elements/coverkioskM02.png" alt="Card image">
                            </div>
                        </div>

my modal

<div class="modal fade" id="modalVideo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-centered modal-dialog-scrollable modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Video</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" Onclick="pauseVid()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <center>
                    <video width="1280" height="720" controls autoplay  id="linkVideo" >
                    </video>
                </center>
            </div>
            <div class="modal-footer">

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

thank you for help

Answer 1

You can stop the video on the hide.bs.modal event.

$('#modalVideo').on('hide.bs.modal', function(e) {
    document.getElementById("linkVideo").pause();
});