Portada » JavaScript » Cómo detener la reproducción de videos iframe modal

Cómo detener la reproducción de videos iframe modal

Cómo detener la reproducción de videos iframe modal. A la hora de agregar un video a un modal usando el framework BootStrap suele reproducir el video muy bien ya sea usando un iframe de YouTube u otra plataforma de video.

Sin embargo, a la hora de cerrar el modal el audio suele seguir reproduciéndose a pesar que reproduciéndose el modal está cerrado.

¿Cómo hago para que el video deje de reproducirse cuando cierro el modal?

La respuesta es muy sencilla y daremos solución de varias formas, acompáñenos a darle solución de una manera muy amigable.

a) Primera forma: Removiendo etiqueta iframe

Se tendrá que capturar el evento al cerrar la modal para detener el vídeo, en este ejemplo como es un iframe, es suficiente con eliminar el iframe:

$('#myModal').on('hidden.bs.modal', function () {
jQuery(".embed-container").find('iframe').remove();
});

Esta acción detiene todos los videos que estén reproduciendo en el iframe de un determinado modal

b) Segunda forma: Detener la reproducción de videos iframe al hacer clic en un enlace JavaScript

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>

Ejemplo completo de habitar iframe y/o eliminar iframe

Vinculo HTML5 para ejecutar la ventana modal. El punto clave es la clase ModalBtn1 que desencadenara la ejecución y visualización de la ventana modal

<!--Modal-->
<a class="btn btn-secondary ModalBtn1" href="#">Mostrar video</a>
<!--End:Modal-->

Ventana modal dinámico y javacript con procesos de cargar iframe y/o remover iframe

<!--Modal Dinámico-->
<div id="video-index">
<div id="modalVideo" class="modal fade" role="dialog">
<div class="modal-dialog-youtube">
<div class="perfil_video modal-content-youtube">
</div>
</div>
</div>
</div>
<!--Video 01-->
<script type='text/javascript'>
$(document).ready(function() {
$('.ModalBtn1').on('click',function(){
$("#modalVideo").modal("show");
$('.perfil_video').append('<iframe id="cartoonVideo" width="100%" height="315" src="//www.youtube.com/embed/OtwcWyZOdxk" frameborder="0" scrolling="no"> </iframe>');
});
$('#modalVideo').on('hidden.bs.modal', function () {
$('.perfil_video').find('iframe').remove();
});
});
</script>

Conclusiones: detener la reproducción de videos iframe modal

Estos casos son habituales a la hora de reproducir videos en ventanas modales, recordemos que la ventana modal se cierra al presionar el botón y/o darle clic fuera de la ventana.

Recordemos que el video no se detendrá y seguirá reproduciendo a pesar que la ventana modal está en modo oculta. Por lo tanto, debemos de apoyarnos de habilitar y deshabilitar los iframe como hemos detallado es este artículo.

Por ultimo, podemos generar Modal Dinámico con PHP y MySQL

Espero que esta información les ayude en sus integraciones web.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad