0

espero me puedan ayudar! Tengo el siguiente modal:

 <div class="modal fade " id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title font-weight-bold" id="videoModalLabel" style="color: #3c0074;">Maestría en Educación y
            Docencia online</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-center">
          <div class="iframe-container embed-responsive embed-responsive-16by9 embed-container">
            <iframe id="video" class="embed-responsive-item" src="./assets/img/maestria/Video/bienvenida.m4v"
              title="YouTube video player" frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div> 

La linea que abre el modal dice #videoModal

Pero me doy cuenta que al abrir el modal no reproduce automáticamente el video, y al cerrar la modal lo sigue reproduciendo. Quiero que haga lo contrario, al abrir la modal reproduzca el video automáticamente y al cerrarlo que el video pare.

2
  • 1
    Si está usando youtube, debe usar la api de youtube para programar esos controles, si está usando un video propio, debe hacerlo con la API de Video de HTML5 . Commented el 20 ene. 2022 a las 1:41
  • Va a ser muy complicado que puedas controlar el video estando dentro de un iframe. ¿Por qué no lo pones con una etiqueta video?
    – Triby
    Commented el 20 ene. 2022 a las 5:30

1 respuesta 1

1

gracias por sus comentarios. Ya pude resolverlo! quedo de la siguiente manera:

 <script>
    $('#videoModal').on('shown.bs.modal', function (event) {
      $('#videoFrame').attr('src', './assets/img/maestria/Video/bienvenida.m4v');
    });
    $('#videoModal').on('hidden.bs.modal', function (event) {
      $('#videoFrame').removeAttr('src', null);
    });
  </script>

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.