Sin usar jQuery, ¿Cómo podría hacer que el video dentro un modal, se reproduzca automáticamente al abrir el modal, y detener el video al cerrar el modal?
Solo encuentro respuestas que hacen uso de jQuery, acaso no es posible hacerlo con Vanilla JavaScript?
PD: Estoy usando Bootstrap en su version 5.2, según la documentación sobre eventos JS, puedo controlar qué hacer al abrir el modal y cerrarlo con
hidden.bs.modal
shown.bs.modal
Esto funciona, pero si hago algo como:
document.getElementById('myVideo').pause();
No funciona, también intenté como evento onClick, sobre el botón que cierra el modal, así:
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>