How do I stop a video from playing after closing a modal - php

Question

I'd like to preface that I am new to web development, so I apologize, I know this question seems to be out there a lot. I have tried many solutions, but I just can't seem to get anything to work.
I am working on a webpage that has a series of tutorial videos, each is in their own modal with descriptions. Is there a way I can stop the video from playing upon closing without needing to create ID tags for each video or use bootstrap? (I'm honestly not even sure how to use it, if I'm being honest.) I've seen a lot of solutions, but none of them seem directly applicable to my existing code.
<button id="myBtn">Video Title</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Video Title</h3>
</div>
<div class="modal-body">
<p>
Video description Prose
<div class="video-container">
<iframe class="responsive-iframe" src="https://drive.google.com/file/d/1M-nlvbG_WUuIq-sjHdntgk1VrhdVnKDh/preview" width="950" height="550"></iframe>
</div>
</p>
</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
Here is the corresponding script I'm using at the bottom of the page.
<script>
var datamap = new Map([
[document.getElementById("myBtn"), document.getElementById("myModal")],
[document.getElementById("myBtn1"), document.getElementById("myModal1")],
[document.getElementById("myBtn2"), document.getElementById("myModal2")],
[document.getElementById("myBtn3"), document.getElementById("myModal3")],
[document.getElementById("myBtn4"), document.getElementById("myModal4")],
[document.getElementById("myBtn5"), document.getElementById("myModal5")],
[document.getElementById("myBtn6"), document.getElementById("myModal6")],
[document.getElementById("myBtn7"), document.getElementById("myModal7")]
]);
datamap.forEach((value, key) => {
doModal(key, value);
});
function doModal(anchor, popupbox) {
// Get the <span> element that closes the modal
var span = popupbox.getElementsByClassName("close")[0];
anchor.addEventListener("click", function (event) {
popupbox.style.display = "block";
});
span.addEventListener("click", function (event) {
popupbox.style.display = "none";
});
window.addEventListener("click", function (event) {
if (event.target == popupbox) {
popupbox.style.display = "none";
}
var
});
}
</script>

Answer 1

You can register handlers for custom modal events that Bootstrap fires, just as you can for built-in events like "click."
It's been a long while since I've done it without jQuery, but something like this should work:
const modals = document.getElementsByClassName("modal");
for (let i = 0; i < modals.length; i++) {
window.addEventListener("hide.bs.modal", function(e) {
// do your stuff
});
}
That's as far as I can go since you haven't included in your question is any detail on the video file itself. I would also question why you're using an iframe instead of a video element.