1

tengo en una web un modal el cual inicia al cargar la pagina y tiene un video de youtube que reproduce automaticamente. El problema que tengo es que al cerrar el modal el video sigue reproduciendo por tal motivo se sigue escuchando el audio mientras navego en la web. Adjunto el JS y el HTML del modal la verdad no se como solucionarlo.

JavaScript:

$(document).ready(function()
   {
      $("#mostrarmodal").modal("show");
   });

$(".modal-backdrop, #mostrarmodal .close, #mostrarmodal .btn").live("click", function() {
        jQuery("#mostrarmodal iframe").attr("src", jQuery("#mostrarmodal iframe").attr("src"));
});

HTML Modal Bootstrap

<div class="modal fade" id="mostrarmodal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cerrar X</button></div>
<div class="modal-body">
<div class="video-responsive"><iframe src="https://www.youtube.com/embed/wvElRPgXKRs?autoplay=1" frameborder="0" allowfullscreen=""></iframe></div>
</div>
</div>
</div>
</div>

Gracias.

2
  • Intenta remover el elemento del DOM junto al proceso en que cierras la modal, algo así: $('video-responsive').remove(); Commented el 19 mar. 2019 a las 21:05
  • Algo como: $('.close').click(function(){ $('video-responsive').remove(); }); No se pues eso entendi voy a probarlo Commented el 19 mar. 2019 a las 21:18

3 respuestas 3

1

Mira, a esto me refería:

$('.close').on('click', () =>{
  $('.video-responsive').remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
Cerrar X
</button>
</div>
<div class="modal-body">
  <div class="video-responsive">
    <iframe src="https://www.youtube.com/embed/wvElRPgXKRs?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
  </div>
</div>

2
  • Excelente me sirvió gracias. Commented el 20 mar. 2019 a las 13:06
  • Ok Camilo, me alegro haber podido colaborar. Te recomiendo marcar como 'aceptada' (✓) la respuesta si logró resolver tu problema. Commented el 20 mar. 2019 a las 13:18
1

Saludos podrias crear de la siguiente manera:

$(document).ready(function() {
    $('.modal').each(function() {
        $this = $(this);
        //al abrir play video
        $this.on('shown.bs.modal', function() {
            toggleVideo('playVideo', $(this));
        });
				//al cerrar modal pause video
        $this.on('hidden.bs.modal', function(){
           toggleVideo('pauseVideo', $(this));
        })
   });

    function toggleVideo(state, div) {
        var iframe = div.find("iframe")[0].contentWindow;
        iframe.postMessage('{"event":"command","func":"' + state + '","args":""}', '*');
    }
});  
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Abrir Video
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Video Youtube</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <iframe width="200" height="150" class="youtubeplayer" id="youtubeplayer" src="https://www.youtube.com/embed/34Na4j8AVgA?list=PLDcnymzs18LWrKzHmzrGH1JzLBqrHi3xQ&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Salir</button>

      </div>
    </div>
  </div>
</div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Lo hace basicamente el Script es al momento de abrir el modal reproduce el video con:

toggleVideo('playVideo', $(this));

y al cerrar el modal lo pone en pausa:

toggleVideo('pauseVideo', $(this));

la funcion toggleVideo recibe dos parametros el evento deseado(playVideo, pauseVideo, stopVideo) y el elemento donde se encuentra el video.

tambien puedes probarlo desde aca: Jsfiddle dado que stack overflow bloquea el contenido de video de Youtube.

Espero te sirva y suerte..!!

2
0

Espero te funcione :)

<!-- Modal -->
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<div class="modal fade" id="myModal" role="dialog">
<a data-controls-modal="myModal" data-backdrop="static" data-keyboard="false" href="#"> <!-- Coloque esta etiqueta y sirve para que no pueda cerrar el modal aprimiendo fuera de éste, así que tiene que apretar el close o el tache -->
    <div class="modal-dialog">
        <!-- Modal content-->
        
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Modal with Dynamic Content</h4>
            </div>
            <div class="modal-body">
              <video autoplay id="video">
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>

$(document).ready(function() {


//$('#video').get(0).play();
      $('#myModal').modal({show:true});
 
});

     $('button').click(function(){ //agrego la funcion click a las etiquetas "button" para que al cerrar el modal pongan pausa al video, como vez utilice la etiqueta <video> y con el id del div utilizo la función pause();
        
        $('#video').get(0).pause();
      });
</script>

2
  • en mi caso colocaria el id video en el iframe? Commented el 20 mar. 2019 a las 10:03
  • necesariamente tienes que poner la etiqueta <iframe></iframe>? Commented el 20 mar. 2019 a las 15:45

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.