Skip to main content
se añadieron 59 caracteres en el cuerpo
Origen Enlace

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, al cerrarmuestra los videos correctamente y la informacion de cada post, le agrege el modal quiero que se pausecodigo jquery para pausar el video, lo he logrado en cierto modo, pero a la hora de abrir otro modalpost(recorrrido con un foreach) que esta en la misma pagina se abre unel video anterior que no tiene relación a su contenidohabía clickeado, antes sin usar la función de pausar el video, me abría bien el contenido,

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, al cerrar el modal quiero que se pause el video, lo he logrado en cierto modo, pero a la hora de abrir otro modal que esta en la misma pagina se abre un video que no tiene relación a su contenido, antes sin usar la función de pausar el video, me abría bien el contenido,

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,

se añadieron 59 caracteres en el cuerpo
Origen Enlace

Hola tengo variosun modal de booststrap 5 que contienen iframescontiene un iframe dentro e información de cada post, y me los muestra al hacer click en un boton, al cerrar el modal quiero que se pause el video, lo he logrado en cierto modo, pero a la hora de abrir otro modal que esta en la misma pagina se abre un video que no tiene relación a su contenido, antes sin usar la función de pausar el video, me abría bien el contenido,

Hola tengo varios modal de booststrap 5 que contienen iframes dentro, al cerrar el modal quiero que se pause el video, lo he logrado en cierto modo, pero a la hora de abrir otro modal que esta en la misma pagina se abre un video que no tiene relación a su contenido, antes sin usar la función de pausar el video, me abría bien el contenido,

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, al cerrar el modal quiero que se pause el video, lo he logrado en cierto modo, pero a la hora de abrir otro modal que esta en la misma pagina se abre un video que no tiene relación a su contenido, antes sin usar la función de pausar el video, me abría bien el contenido,

se eliminaron 603 caracteres en el cuerpo
Origen Enlace
alo Malbarez
  • 9.7k
  • 3
  • 12
  • 29

//boton botón con el cual cierro la ventana modal

   <a  data-bs-toggle="modal"
  style='cursor: pointer;' id='videogumb' class='icon- 
  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;'
  center center;' alt="...">  
</a> 

//ventana Ventana modal dentro de un foreach, con el id='iframes' para funcionar con jqueryjQuery

   <div  
 <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"  >xl">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" style='color: white;' id="ModalLabel-<?php 
          id="ModalLabel-<?php echo $i;?>"><?php the_title(); ?></h5>
        <button type="button"
       <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 
                 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
                           allowfullscreen 
                   style="position:absolute;top:0;left:0;width:100%;height:100%;"
                            title=""></iframe></div>iframe>
            </div>
        <script src="https://player.vimeo.com/api/player.js"></script>
                </div>
              
              </div>
          </div>
        </div>

//jquery 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);
 
             });

//boton 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);
 
             });

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);
});
Origen Enlace
Loading