1

Hola tengo un modal de booststrap 5 que contiene un iframe dentro e información de cada post, y me los muestra al hacer click en un boton, muestra los videos correctamente y la informacion de cada post, le agrege el codigo jquery para pausar el video, pero a la hora de abrir otro post(recorrrido con un foreach) que esta en la misma pagina se abre el video anterior que había clickeado, antes sin usar la función de pausar el video, me abría bien el contenido,

botón con el cual cierro la ventana modal

<a data-bs-toggle="modal"
  style='cursor: pointer;'
  id='videogumb'
  class='icon-play-card'
  data-bs-target="#staticBackdrop-<?php echo $i;?>">
  <img src="<?php echo get_field('miniatura'); ?>"
    class="card-img-top"
    style='width:100%; height: 300px; background-size:cover: background-position: center center;'
    alt="...">
</a> 

Ventana modal dentro de un foreach, con el id='iframes' para funcionar con jQuery

<div 
  class="modal fade"
  id="staticBackdrop-<?php echo $i;?>"
  data-bs-keyboard="false" tabindex="-1"
  aria-labelledby="staticBackdropLabel-<?php echo $i;?>"
  aria-hidden="true" >
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" style='color: white;'
          id="ModalLabel-<?php echo $i;?>"><?php the_title(); ?></h5>
        <button type="button"
          class="btn-close" data-bs-dismiss="modal"
          aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div style="padding:50.24% 0 0 0;position:relative;" 
          class='video-responsive'>
<iframe class='pauseiframe' id='iframes'
  src="https://player.vimeo.com/video/<?php
    echo $videocolumns;
  ?>&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen 
  style="position:absolute;top:0;left:0;width:100%;height:100%;"
  title=""></iframe>
        </div>
        <script src="https://player.vimeo.com/api/player.js"></script>
      </div>
    </div>
  </div>
</div>

jQuery para pausar el iframe del modal, y luego volver a mostrar el iframe al abrir otro modal

jQuery('.btn-close').on('click', () =>{
  var $frame = jQuery('iframe#iframes');
  // saves the current iframe source
  var vidsrc = $frame.attr('src');
  // sets the source to nothing, stopping the video
  $frame.attr('src',''); 
  // sets it back to the correct link so that
  // it reloads immediately on the next window open
  $frame.attr('src', vidsrc);
});
8
  • Una pregunta similar fue respondida ayer revisala, Reproducir video al abrir modal y detenerlo al cerrar. Commented el 27 jul. 2022 a las 21:17
  • estoy usando vimeo, asi que no se si puedo cambiar la etiqueta Commented el 27 jul. 2022 a las 21:44
  • Si te refieres a la pregunta que realizaste, puedes editarla las veces que quieras y ahí modificar la etiqueta para que sea visible en la comunidad y así recibir una respuesta mas acertada. Commented el 27 jul. 2022 a las 21:49
  • Me refiero a la plataforma de videos "Vimeo" que me facilita una etiqueta iframe para incrustar el video Commented el 27 jul. 2022 a las 21:53
  • te convendría tener un solo modal con un solo iframe, al cual le seteas el src al abrir y lo limpias al cerrar. si tenes muchos modales en cada uno el id de cada iframe debería ser unico para que el jquery no encuentre siempre el primero, mismo vale para el <script/> de vimeo que convendria insertarlo una sola vez ( modal y script pueden ir por fuera del loop foreach ) Commented el 28 jul. 2022 a las 12:00

1 respuesta 1

1

Opción 1:

Tomando el ejemplo de bootstrap "Modales con contenido variable" definís un atributo data- en los "botones" que abren el modal, luego con los eventos show.bs.modal y hide.bs.modal seteas o limpias el src del iframe.

Un solo modal un solo iframe.

// https://getbootstrap.com/docs/4.1/components/modal/#varying-modal-content

$('#exampleModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var videoUrl = button.data('videourl') // Extract info from data-* attributes
  var videoTitle = button.find('h5').text() // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(videoTitle)
  modal.find('iframe').attr("src", videoUrl)
})

$('#exampleModal').on('hide.bs.modal', function(event) {
  var modal = $(this)
  modal.find('.modal-title').text('')
  modal.find('iframe').attr("src", "")
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- abre loop while have posts the_post etc, -->

<!-- foreach video list en ACF field -->

<a class="icon-play-card" data-toggle="modal" data-target="#exampleModal" data-videourl="https://player.vimeo.com/video/298282253?h=6b52545bc7">
  <h5>titulo video 1</h5>
</a>
<a class="icon-play-card" data-toggle="modal" data-target="#exampleModal" data-videourl="https://player.vimeo.com/video/717844637?h=96b97de261">
  <h5>titulo video 2</h5>
</a>
<a class="icon-play-card" data-toggle="modal" data-target="#exampleModal" data-videourl="https://player.vimeo.com/video/46832815?h=015a557580&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
  <h5>titulo video 3</h5>
</a>

<!-- cierra endforeach -->

   <!-- endwhile del have posts -->

<!-- posts pagination cierre de columna/grid/tabla etc..->

<!-- aqui el modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <div style="padding:50.24% 0 0 0;position:relative;" 
          class='video-responsive'>
        <iframe src="" 
        frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen 
  style="position:absolute;top:0;left:0;width:100%;height:100%;"
  ></iframe>
  </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- footer etc -->

<!-- scripts enqueue o embed -->

<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://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://player.vimeo.com/api/player.js"></script>

Opcion 2:

Aprovechas que tenes el javascript de vimeo y creas el iframe/embed dinámicamente

$(document).ready(function() {
  console.log("ready!");
  $('#exampleModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var videoUrl = button.data('videourl') // Extract info from data-* attributes
    var videoTitle = button.find('h5').text() // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text(videoTitle)

    // Will create inside the made-in-ny div:
    // <iframe src="https://player.vimeo.com/video/59777392?h=ab882a04fd&loop=1" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>
    const options = {
      id: videoUrl,
      loop: true,
      autoplay: true,
      muted: true,
      responsive: true,
    };
    const player = new Vimeo.Player('el-video', options);
  })

  $('#exampleModal').on('hide.bs.modal', function(event) {
    var modal = $(this)
    modal.find('.modal-title').text('')
    const elVideo = new Vimeo.Player('el-video');
    elVideo.destroy()
  })

});
<!--  https://es.stackoverflow.com/questions/548750/pausar-iframe-al-cerrar-un-modal-de-booststrap -->


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- foreach video list en ACF field -->

<a class="icon-play-card" data-toggle="modal" data-target="#exampleModal" data-videourl="https://player.vimeo.com/video/298282253?h=6b52545bc7">
  <h5>titulo video 1</h5>
</a>
<a class="icon-play-card" data-toggle="modal" data-target="#exampleModal" data-videourl="https://player.vimeo.com/video/717844637?h=96b97de261">
  <h5>titulo video 2</h5>
</a>
<a class="icon-play-card" data-toggle="modal" data-target="#exampleModal" data-videourl="https://player.vimeo.com/video/46832815?h=015a557580&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479">
  <h5>titulo video 3</h5>
</a>

<!-- cierra endforeach  -->

<!-- posts pagination cierre de columna/grid/tabla etc..->

<!-- aqui el modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class='video-responsive' id="el-video">
        </div>
      </div>
    </div>
  </div>
</div>

<!-- scripts enqueue o embed -->

<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://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://player.vimeo.com/api/player.js"></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.