ccc

JQuery: Cargar dinámicamente los vídeos de un modal de Bootstrap

Esto es útil cuando se tienen muchos modales y si se cierra el modal y luego se vuelve a abrir empiece desde el principio el vídeo y no siga reproduciéndose.

<div class="modal fade" id="modalPepitoPerez" tabindex="-1" role="dialog" aria-labelledby="modalPepitoPerez" aria-hidden="true">
          <div class="modal-dialog video" role="document">
        <div class="modal-content">
          <div class="modal-header">         
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <img src="imagenes/iconos/close-white.png" alt="Cerrar">
            </button>
          </div>
          <div class="modal-body">
            <iframe class="embed-responsive-item" src=" data-src="https://www.youtube.com/embed/Lbx2633xuds" frameborder="0" allowfullscreen="" id="widget2" data-gtm-yt-inspected-="true"></iframe>
           
          </div>

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


$('.modal.fade').on('shown.bs.modal', function () {
   onsole.log("Abriendo modal:"+$(this).attr("id"));
   dataSCR = $("#"+$(this).attr("id")+" iframe").attr("data-src");
   console.log("src:"+dataSCR);
   $("#"+$(this).attr("id")+" iframe").attr("src", dataSCR);
});

$('.modal.fade').on('hidden.bs.modal', function () {
   console.log("cerrando modal:"+$(this).attr("id"));
   $("#"+$(this).attr("id")+" iframe").attr("src", "");
});

No hay comentarios:

Publicar un comentario