Фоновое воспроизведение видео продолжается после закрытия окна

Делаю макет простенького сайта,используя Bootstrap. На главной странице есть синяя кнопочка, по нажатию на которую на весь экран выскакивает окно с видео. После закрытия окна звук от видео (и само видео) продолжает воспроизводиться в фоне. Прерывает этот процесс только обновление страницы. Как сделать так, чтобы после закрытия всплывающего окна воспроизведение прекращалось?

// js

var $videoSrc;
$('.btn-play').click(function () {
$videoSrc = $(this).data("src");
});
console.log($videoSrc);
$('#videoModal').on('shown.bs.modal', function (e) {
$("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
})
$('#videoModal').on('hide.bs.modal', function (e) {
$("#video").attr('src', $videoSrc);
})

// html 

<div class="modal modal-video fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content rounded-0">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Never gonna give you up</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="img/astley.mp4" id="video" allowfullscreen allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>