0

¿Cómo le hago para que el video deje de reproducirse cuando cierro el modal? No encuentro la manera de hacerlo, ya probé con varios códigos y nada

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
  jQuery('header').css('display', 'none');
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
  jQuery('header').css('display', 'block');
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    jQuery('header').css('display', 'block');
  }
}
body {
  background: #ccc
}

@media only screen and (max-width: 800px) {
  #embed-container-desk {
    position: relative;
    padding-bottom: 130%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
  }
}

@media only screen and (max-width: 400px) {
  #embed-container-desk {
    position: relative;
    padding-bottom: 350%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
  }
  #tache {
    padding-top: 140px !important;
  }
}

#myBtn {
  padding: 20px 25px 20px 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #fff;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.01);
  margin-top: 28px;
}

#myBtn:hover {
  padding: 20px 25px 20px 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #000;
  border: 1px solid #cddc2a;
  background-color: #cddc2a;
  margin-top: 28px;
}

#myModal {
  width: 100%;
  height: 100%;
  z-index: 900;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed !important;
  /* Stay in place */
  z-index: 101;
  /* Sit on top */
  left: 0px;
  top: -20px;
  overflow: auto;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}


/* Modal Content */

.modal-content {
  position: center;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  height: auto;
  margin: auto;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}


/* The Close Button */

.close {
  color: #cddc2a;
  /*float: left;*/
  font-size: 20px;
  font-weight: bold;
  padding-top: 0px;
}

.close:hover,
.close:focus {
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  width: 100%;
  height: auto;
}

.modal-footer {
  background-color: #000;
  color: white;
}


/* Add Animation */

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.embed-container {
  position: relative;
  padding-bottom: 95%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#tache {
  padding-top: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">VIEW VIDEO</button>

<!-- The Modal -->
<div id="myModal" class="modal" width="100%">

  <!-- Modal content -->
  <div class="modal-content" style="background-color:#000;">
    <div class="modal-header" style="background-color:#000;">
      <span 
        class="close" id="span-close"><i 
        class="far fa-times-circle"  id="tache"></i></span>
    </div>
    <div class="embed-container" id="embed-container-desk">
      <iframe 
        src="https://player.vimeo.com/video/158196905?title=0&byline=0&portrait=0"
        width="640" height="340" frameborder="0"
        webkitallowfullscreen mozallowfullscreen
        allowfullscreen style="top:-350px;"></iframe>

    </div>


  </div>

</div>

7 respuestas 7

1

Tienes que capturar el evento al cerrar la modal para allí, detener el vídeo, en tu caso como es un iframe, es suficiente con eliminar el iframe:

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

Puedes agregar esta funcion en el evento que tengas para ocultar el modal

$("iframe").each(function() { 
        var src= $(this).attr('src');
        $(this).attr('src',src);  
});

Esta detiene todo los videos que estén reproduciendo en todos los ifram de la pagina.

Fuente: https://stackoverflow.com/questions/13598423/stop-all-playing-iframe-videos-on-click-a-link-javascript

Edito:

Podrias agregar la funcion en el evento siguiente de tu código:

span.onclick = function() {
/* funcion para detener la repduccion del video */
$("iframe").each(function() { 
       var src= $(this).attr('src');
       $(this).attr('src',src);  
});
      modal.style.display = "none";
      jQuery('header').css('display','block');
 }
2
  • No creo que sea la forma idónea de hacerlo. Commented el 2 mar. 2018 a las 4:45
  • @user3646126 consideras que es mejor eliminar el elemento y volverlo a agregar ? Y si son 10 videos en la misma web? Lo agregaras 1 por 1? Commented el 2 mar. 2018 a las 11:36
0

Sería mejor:

btn.onclick = function() {
    var src = jQuery(this).attr('data-video');
    jQuery(".embed-container").html('<iframe src="'+src+'" width="640" height="340" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="top:-350px;"></iframe>');
    modal.style.display = "block";
    jQuery('header').css('display','none');
 }
span.onclick = function() {
      jQuery(".embed-container").find('iframe').remove();
      modal.style.display = "none";
      jQuery('header').css('display','block');
}

2
  • No creo sea la mejor forma ya que si agregara mas vídeos tendrían que agregar manualmente cada vídeo en el javascript Commented el 2 mar. 2018 a las 11:38
  • Saludos podrias agregar mas detalles al respecto..!! Commented el 22 abr. 2019 a las 18:08
0

puedes utilizar jquery para resolver el problema, adjunto el código fuente:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estyless.css">
    <link rel="stylesheet" href="css/modal.css">
    <link href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao&display=swap" rel="stylesheet">
    <title>SliderJson</title>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="buttonLeft" id="atras">&#60</div>
                <div class="buttonRight" id="siguiente">&#62</div>
                <img class="SliderImages"></img>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <h1 class="titlee">El cuento de Ibrakadabra!</h1>
                <img class="ImgVideo" src="assets/img/ibra.jpg" rel="modal:open">
            </div>
            <div class="col-sm-2"></div>
        </div>
    </div>
    <!-- Link to open the modal -->
    <div class="container">
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <div id="ex1" class="modal">
                    <iframe class="myFrame" width="560" height="315" src="assets/Video/CuentoZlatan.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <a class="close-modal" rel="modal:close">X</a>
                </div>
            </div>
            <div class="col-sm-2 "></div>
        </div>
    </div>

    <script src="js/jquery.js "></script>
    <script src="js/bootstrap.min.js "></script>
    <script src="assets/json/images.json "></script>
    <script src="js/sliderOne.js "></script>
    <script src="js/modal.js "></script>
    <script>
        $('.ImgVideo').click(() => {
            $('.myFrame').attr('src', 'assets/Video/CuentoZlatan.mp4');
            //alert('click');
            $("#ex1 ").modal({
                escapeClose: false,
                clickClose: false,
                showClose: false
            });
        });
        $('.close-modal').click(() => {
            //alert('click iin the button close');
            $('.myFrame').removeAttr('src');

        });
    </script>
</body>

</html>```

si quieres profundizar mas en este código puede revisar el siguiente enlace: 
https://www.youtube.com/watch?v=1qjfssmKNS4
0

el problema es que al cerra el modal, el video se reproduce de fondo, para solucionar este problema puedes utilizar jquery. debes programar el boton cerrar, al hacer click en el boton cerrar eliminas el src del iframe de la siguiente manera:

$('.close-modal').click(() => {
$('.myFrame').removeAttr('src');
});```

ahora si vas al navegador y recargas vera que se cierra el modal y se cierra el video, pero si haces click en la referencia que dispara el modal, se desplegara el modal pero no se reproducira el video porque lo removimos hace un momento. Para dar solucion a este tema debes programar el enlace que llamama al modal de la siguiente manera:

$('.ImgVideo').click(() => {
$('.myFrame').attr('src', 'assets/Video/CuentoZlatan.mp4');
$("#ex1 ").modal({
escapeClose: false,
clickClose: false,
showClose: false
});
});
0

Tienes un modal id=modalv con un iframe id=mmv.

En un script pones (sin función ni nada):

$("#modalv").on('hidden.bs.modal', function () {
$('#mmv').removeAttr('src');
});

Con esto capturas cuando se cierra el Modal (por botón cerrar o por hacer click afuera) y le quitas el atributo src. Se detiene el video

-1

para dar solución a este problema puedes revisar este vídeo:

https://www.youtube.com/watch?v=1qjfssmKNS4

source:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estyless.css">
    <link rel="stylesheet" href="css/modal.css">
    <link href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao&display=swap" rel="stylesheet">
    <title>SliderJson</title>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="buttonLeft" id="atras">&#60</div>
                <div class="buttonRight" id="siguiente">&#62</div>
                <img class="SliderImages"></img>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <h1 class="titlee">El cuento de Ibrakadabra!</h1>
                <img class="ImgVideo" src="assets/img/ibra.jpg" rel="modal:open">
            </div>
            <div class="col-sm-2"></div>
        </div>
    </div>
    <!-- Link to open the modal -->
    <div class="container">
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <div id="ex1" class="modal">
                    <iframe class="myFrame" width="560" height="315" src="assets/Video/CuentoZlatan.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <a class="close-modal" rel="modal:close">X</a>
                </div>
            </div>
            <div class="col-sm-2 "></div>
        </div>
    </div>

    <script src="js/jquery.js "></script>
    <script src="js/bootstrap.min.js "></script>
    <script src="assets/json/images.json "></script>
    <script src="js/sliderOne.js "></script>
    <script src="js/modal.js "></script>
    <script>
        $('.ImgVideo').click(() => {
            $('.myFrame').attr('src', 'assets/Video/CuentoZlatan.mp4');
            //alert('click');
            $("#ex1 ").modal({
                escapeClose: false,
                clickClose: false,
                showClose: false
            });
        });
        $('.close-modal').click(() => {
            //alert('click iin the button close');
            $('.myFrame').removeAttr('src');

        });
    </script>
</body>

</html>```
1
  • Procura por favor añadir una explicación aquí, basándonos en Cómo responder, si el video deja de estar disponible entonces la información se pierde y será una respuesta con solo código
    – user128299
    Commented el 23 mar. 2020 a las 16:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.