Arrêtez et lisez la vidéo Iframe lorsque la lightbox se ferme

Je crée une lightbox censée afficher une vidéo sur youtube. Le premier problème que j'ai rencontré, était que ma vidéo YouTube continuerait à jouer quand je ferais la fermeture de la visionneuse.Arrêtez et lisez la vidéo Iframe lorsque la lightbox se ferme

J'ai ensuite ajouté: $ ('iframe'). Remove();

Mais l'iframe en va biensur, et seule une case vide s'ouvre lorsque je clique sur le lien d'activation de la visionneuse.

Comment refaire le chargement de mon iframe après l'avoir retiré?

Ou y a-t-il une autre façon de faire arrêter la vidéo lorsque je ferme la lightbox?

Mon code est ici:

<html> 
<head> 
    <title>Youtube Lightbox</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <style type="text/css"> 

    body 
    { 
     font-family: Arial; 
    } 

    .backdrop 
    { 
     position:absolute; 
     top:0px; 
     left:0px; 
     width:100%; 
     height:100%; 
     background:#000; 
     opacity: .0; 
     filter:alpha(opacity=0); 
     z-index:50; 
     display:none; 

    } 


    .box 
    { 
     position:absolute; 
     top:20%; 
     left:30%; 
     width:500px; 
     height:300px; 
     background:#ffffff; 
     z-index:51; 
     padding:10px; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     -moz-box-shadow:0px 0px 5px #444444; 
     -webkit-box-shadow:0px 0px 5px #444444; 
     box-shadow:0px 0px 5px #444444; 
     display:none; 
    } 


    </style> 

    <script type="text/javascript"> 

     $(document).ready(function(){ 

      $('.lightbox').click(function(){ 
       $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); 
       $('.box').animate({'opacity':'1.00'}, 300, 'linear'); 
       $('.backdrop, .box').css('display', 'block'); 

      }); 


      $('.backdrop').click(function(){ 
       close_box(); 
      }); 

     }); 

     function close_box() 
     { 
      $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ 
       $('.backdrop, .box').css('display', 'none'); 
       $('iframe').remove(); 
      }); 


     } 

    </script> 

</head> 
<body> 

<h1>This is a webpage...</h1> 
<a href="#" class="lightbox">Open Youtube lightbox</a> 

<div class="backdrop"></div> 
<div class="box"><iframe width="500" height="300" src="http://www.youtube.com/embed/some/video" frameborder="0" allowfullscreen></iframe></div> 

</body> 
    </html>

J'espère que celui que vous pouvez me aider! :) Merci.

Btw. J'ai fait des recherches sur le forum et trouvé des sujets similaires, mais pas une réponse que je pourrais utiliser, pour le moment.

Source

2013-04-28 Adnaves

Vous pouvez modifier l'attribut src de l'iframe avec jQuery pour rien, puis le recharger (si elle ne se recharge pas par lui-même) avec ceci:

function close_box() { 
    $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ 
     $('.backdrop, .box').css('display', 'none'); 
     $('#box iframe').prop('src', '#'); 
     document.getElementById(FrameID).contentDocument.location.reload(true); 
    }); 
}

(j'ai eu ceci de this link) Le seul inconvénient est que la vidéo se rechargera à nouveau lorsque vous ouvrirez la lightbox pour la deuxième fois, et que vous devez changer la fonction qui ouvre la lightbox pour la première fois.

En note, je vous recommande de ne pas charger l'iframe jusqu'à ce que la lightbox soit ouverte, ce qui signifie que le mieux que vous pouvez faire est d'ajouter le code avec JavaScript si nécessaire. Cela prend 0.000001 secondes de plus, ne t'inquiète pas. I use it in my website et fournit un chargement très rapide (du site Web, bien sûr) et maintient le navigateur très léger.

Mais une autre façon (et je l'aime vraiment celui-ci) est de déclencher une space keypress sur l'iframe, arrêtant donc la vidéo, alors quand il est ouvert à nouveau, vous trouverez une pause sur le même instant. Quelque chose comme:

function close_box() { 
    $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ 
     $('.backdrop, .box').css('display', 'none'); 
     var e = jQuery.Event("keyup"); 
     e.which = 23; // The spacebar key code is 23 
     $('#box iframe').trigger(e); 
    }); 
}

Source

2013-04-28 18:53:01 Nico

Mais grâce à votre lien, cela m'a aidé: $ (« #iframe ') .attr (' src ', fonction (i, val) {return val;}); – Adnaves

function close_box() 
    { 
     $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ 
      $('.backdrop, .box').css('display', 'none'); 
      $('iframe').remove(); 
      var video = $('iframe').attr("src"); 
      $('iframe').attr("src",""); 
    $('iframe').attr("src",video); 
     }); 


    }

Source

2013-11-10 16:48:43 hiddenpearls

Cette fonction arrêtera votre vidéo, sans src vidéo Supprimer

function unsetVideoLink(id){ 
 
    var src = $(id).attr('src'); 
 
    $(id).attr('src',''); 
 
    $(id).attr('src',src); 
 
}

Source

2017-07-21 14:58:30

Arrêtez et lisez la vidéo Iframe lorsque la lightbox se ferme

Répondre

Questions connexes