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.
