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;
?>&badge=0&autopause=0&player_id=0&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);
});
<script/>
de vimeo que convendria insertarlo una sola vez ( modal y script pueden ir por fuera del loop foreach )