Estoy usando Bootstrap 5 Modal Popup, incrusté un Iframe en el cuadro emergente y todo funciona bien, pero cuando cierro la ventana emergente, el video no se detiene / pausa e incluso la ventana emergente está cerrada, todavía se está ejecutando. el fondo y traté de detenerlo a través de Jquery pero no sé por qué no funciona. Entonces, ¿alguien puede decirme cómo pausar/detener el video cuando la ventana emergente está cerrada?
$(document).ready(function() { var url = $("#how-it-works-video").attr('src'); $("#exampleModal").on('hide', function() { $("#how-it-works-video").attr('src', ''); }); $("#exampleModal").on('show', function() { $("#how-it-works-video").attr('src', url); }); }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Button trigger modal --> <a class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> How it works </a> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <iframe id="how-it-works-video" width="100%" height="100%" src="https://www.youtube.com/embed/BrD3abCyuzw" title="YouTube video player" frameborder="5" allowfullscreen></iframe> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>Editar: noté que el video no se reproduce en el editor de código Stackoverflow, pero si usa cualquier otro editor de código, funcionará
Bootstrap v5 tiene diferentes detectores de eventos. Tienes que cambiar mostrar a mostrado.bs.modal / ocultar a ocultar.bs.modal .
$("#exampleModal").on('hide.bs.modal', function() { $("#how-it-works-video").attr('src', ''); console.log('Unloaded') }); $("#exampleModal").on('shown.bs.modal', function() { $("#how-it-works-video").attr('src', url); console.log('Loaded') });