Comment faire pour fermer fancybox automatiquement lorsque l'ID de la vidéo youtube est terminée?

Question

Comment puis-je fermer automatiquement fancybox lorsque la vidéo youtube est terminée?

Answer 1

Ce n'est pas aussi simple que cela puisse paraître:

• d'abord déterminer si vous allez utiliser le lecteur embed ou iframe.
• Suivez les exemples embed player API ou iframe player API pour initialiser l'API.
• Utilisez la fonction "onComplete" fancybox callback pour configurer le lecteur une fois la fenêtre contextuelle ouverte.
• Dans le rappel, assurez-vous d'ajouter un écouteur d'événement onStateChange afin que vous puissiez déterminer quand la vidéo est terminée (la valeur de zéro signifie que la vidéo est terminée)
• Une fois que vous trouvez que la vidéo est terminée, utilisez la $.fancybox.close méthode pour fermer la fenêtre

ou, vous pouvez simplement laisser l'utilisateur fermer la fenêtre contextuelle.

Answer 2

Après avoir regardé autour sans chance est ici une solution, je suis venu avec

Voyez ce que nous faisons, regarder une vidéo ici

<div style="display: none;"> 
<div id="player"></div> 
</div> 

    <script src="http://www.youtube.com/player_api"></script> 

    <script> 

     $(document).ready(function() { 
       $("a.video_button").fancybox({ 
         'titlePosition'  : 'inside', 
         'transitionIn'  : 'none', 
         'transitionOut'  : 'none' 
        }); 
     });   


     // create youtube player 
     var player; 
     function onYouTubePlayerAPIReady() { 
      player = new YT.Player('player', { 
       height: '390', 
       width: '640', 
       videoId: 's19V_6Ay4No', 
       events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 

     // autoplay video 
     function onPlayerReady(event) { 
     } 


     // when video ends 
     function onPlayerStateChange(event) {   
      if(event.data === 0) {   
       $(document).ready(function() { parent.$.fancybox.close();}); 
      } 
     } 

    </script> 

Answer 3

Oui, c'est la bonne façon de gérer à fancybox ou colorbox . L'API de Youtube Video fournit différents états pour gérer ceci comme unstarted = -1, terminé = 0, playing = 1, mis en pause = 2, buffering = 3, video cued = 5

Obtenir ou piéger cet état dans le bloc de code fancybox jquery peut y parvenir facilement. Il suffit de visiter cet article avec une démo appropriée aussi.

Answer 4

Ceci est le script complet avec Fancybox-Youtube-Cookie-Autoclose-Autopopup il suffit de télécharger les images qui sont nécessaires dans css les mettre dans le dossier/fancybox dans votre racine et remplacer par votre ID vidéo. Fonctionne vraiment bien testé ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen" /> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 
 
<script src="http://www.youtube.com/player_api"></script> 
 
<script type="text/javascript"> 
 
// detect mobile devices features 
 
var isTouchSupported = 'ontouchstart' in window, 
 
    isTouchSupportedIE10 = navigator.userAgent.match(/Touch/i) != null; 
 
function onPlayerReady(event) { 
 
    if (!(isTouchSupported || isTouchSupportedIE10)) { 
 
     // this is NOT a mobile device so autoplay  
 
     event.target.playVideo(); 
 
    } 
 
} 
 
function onPlayerStateChange(event) { 
 
    if (event.data === 0) { 
 
     $.fancybox.close(); 
 
    } 
 
} 
 
function onYouTubePlayerAPIReady() { 
 
$(function() { 
 
    if ($.cookie('welcome_video')) { 
 
     // it hasn't been three days yet 
 
    } else { 
 
     // set cookie to expire in 3 days 
 
     $.cookie('welcome_video', 'true', { expires: 3}); 
 
    $(document).ready(function() { 
 
     $.fancybox.open({ 
 
\t \t href: "https://www.youtube.com/embed/qm1RjPM9E-g", /*YOUR VIDEO ID*/ 
 
      helpers: { 
 
       media: { 
 
        youtube: { 
 
         params: { 
 
          autoplay: 1, 
 
          rel: 0, 
 
          // controls: 0, 
 
          showinfo: 0, 
 
          autohide: 1, 
 
         } 
 
        } 
 
       }, 
 
       buttons: {} 
 
      }, 
 
      beforeShow: function() { 
 
       var id = $.fancybox.inner.find('iframe').attr('id'); 
 
       var player = new YT.Player(id, { 
 
        events: { 
 
         onReady: onPlayerReady, 
 
         onStateChange: onPlayerStateChange 
 
        } 
 
       }); 
 
      } 
 
     }); // fancybox \t 
 
    }); // ready 
 
    } // cookie else ready 
 
}); // function for cookie 
 
} // youtube API ready 
 
</script>