video's audio continues playing even after modal is closed (not using iframe)
Posted by DiamondKing__@reddit | learnprogramming | View on Reddit | 3 comments
I'm out of ideas,, for context im just a very beginner programmer (student actually,, just an elective for html and css only),, so javascript aint really up my alley on this so im asking for help cuz i really dont get why it isnt working.
As the title says, when I close the modal of the video, the audio keeps playing. I have searched a lot of solutions and i might not be doing it right. The code i'm using for the modal aint mine, it was mainly used for image modals and thought to use the same line of codes for videos but ig it doesnt work that easily.
Here is the gist of my html code for each of the modal, i'll just show two of em but i hope yall will get the idea
<div id="modal1" class="modal">
<span class="close" onclick="closeModal('modal1')">×</span>
<video class="modal-content" controls>
<source src="" type="video/mp4">
</video>
</div>
<div id="modal2" class="modal">
<span class="close" onclick="closeModal('modal2')">×</span>
<video class="modal-content" controls>
<source src="" type="video/mp4">
</video>
</div>
Then here is the script part
<script>
function openModal(modalId) {
let modal = document.getElementById(modalId);
modal.style.display = "flex";
modal.classList.add("show");
}
function closeModal(modalId) {
let modal = document.getElementById(modalId);
modal.classList.remove("show");
setTimeout(function () {
modal.style.display = "none";
}, 300);
let vid = document.querySelector('.modal-content');
vid.pause();
vid.currentTime = 0;
}
</script>
im not sure of what else i needed to show to come up with a solution, but if you do find one, i'd appreciate a bit of explanation as well so I could understand and learn it better! In a very basic terms hopefully,, I didn't think wanting something pop up would need javascript so i really just dipped myself into something more complicated than i thought.
IvyDamon@reddit
Yeah this is almost always a scoping issue with how you’re grabbing the video element.
If you’re closing one modal but your selector is hitting the first video it finds on the page, that one keeps playing in the background which is super annoying.
I ran into the same thing a while back and switching to querying inside the modal itself fixed it right away. Also worth checking if any event listeners are firing twice, that bit me once too.
TimePiccolo2565@reddit
Your querySelector is only grabbing the first video element it finds, not the one in the specific modal you're closing. When you have multiple modals with videos, you need to target the video inside that particular modal
Try changing this part of your closeModal function:
```javascript
function closeModal(modalId) {
let modal = document.getElementById(modalId);
modal.classList.remove("show");
setTimeout(function () {
modal.style.display = "none";
}, 300);
// Get the video specifically from this modal
let vid = modal.querySelector('video');
vid.pause();
vid.currentTime = 0;
}
```
The key change is `modal.querySelector('video')` instead of just `document.querySelector('.modal-content')`. This way you're telling it to find the video element inside the specific modal you're closing, not just any video on the page. Since you already have the modal element stored in the `modal` variable, you can search within that specific container
I ran into something similar when I was messing around with multiple video players on a page - took me way too long to realize I was pausing the wrong video half the time
DiamondKing__@reddit (OP)
That makes so much more sense why it only works on the first modal now. This is such a smart and simple solution than the other hundred complicated ways I had tried lmaoo it works well!! thanks dude and kudos on the quick explanation!