Without using jQuery , how could I make the video inside a modal, play automatically when the modal is opened, and stop the video when the modal is closed?
I only find answers that make use of jQuery, isn't it possible to do it with Vanilla JavaScript ?
PS: I'm using Bootstrap version 5.2, according to the documentation on JS events, I can control what to do when opening the modal and closing it with
hidden.bs.modal
shown.bs.modal
This works, but if I do something like:
document.getElementById('myVideo').pause();
It doesn't work, I also tried as an onClick event, on the button that closes the modal, like so:
onclick="this.paused?this.play():this.pause();"
const myModalOpen = document.getElementById('exampleModal')
exampleModal.addEventListener('shown.bs.modal', event => {
console.log('Abierto y autoplay');
})
const myModalClose = document.getElementById('exampleModal')
exampleModal.addEventListener('hidden.bs.modal', event => {
console.log('Cerrado y stop');
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<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 id="myVideo" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" title="Video" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The problem is that you are inserting the video as a
iframe
and in principle you do not have control of its reproduction. If the video were from a particular platform (let's say YouTube), then we would have to see how to use one of its APIs to control it.If you replace the
iframe
by avideo
then yes you can control playback.It's as easy as adding three more lines of JS code and you're done.
But first of all, you didn't mention anything about the
iframe
, which of which, in my opinion (not knowing exactly how the video(s) will be presented on your page); it's othersI suggest using a tag directly
video
and giving it custom styling and more functionality.One and the first is:
Of course, it can also be:
const video = document.getElementBiId("video");
if there is an ID.Second, when the modal is called, the play event is also added to the video, as simple as:
The same and third, when closing the modal a video pause must also be indicated:
To conclude, I added (commented out) a
video.currentTime = 0
so that when you reopen the modal, the video will play again.I hope it helps you. Cheers