web-dev-qa-db-fra.com

Lightbox Plus ColorBox plug-in et lecture automatique de vidéos YouTube

J'utilise WP v3.6 et v2.6 du plug-in et j'utilise des lightbox intégrées pour ouvrir une vidéo YouTube intégrée avec un iframe. Mon patron souhaite que la vidéo soit lue à l'ouverture de la lightbox. Donc à l'origine j'ai essayé:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player1;

function onYouTubeIframeAPIReady() {
    console.log('api ready');
    player1 = new YT.Player('player1', {});
}
jQuery(function()){
    jQuery('.lbp-inline-link-1').click(function(){
        player1.playVideo(); }
    });
});

Cependant, cela n'a pas fonctionné. J'ai finalement compris que le plug-in était en train d'arrêter la vidéo en cours de lecture dans la lightbox lors de son ouverture et de sa fermeture. Mon jeu déclenchant les événements de clic était donc trop tôt. J'ai ensuite modifié mon appel pour:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player1;

function onYouTubeIframeAPIReady() {
    console.log('api ready');
    player1 = new YT.Player('player1', {
        events: {
            'onReady': onPlayerReady
        }
    });
}
function onPlayerReady(event){
    console.log('player ready');
    jQuery('.lbp-inline-link-1').click(function(){
        console.log('click ready');
        var fn = function(){ event.target.playVideo(); }
        setTimeout(fn, 2500);
    });
}

Exemple de page actuelle sur https://test-cms.salesgenie.com/salesgenie-data-quality/

Cela fonctionnait dans Chrome, mais dans tous les autres navigateurs, seule la vidéo est lue automatiquement la deuxième fois qu'elle est ouverte dans la lightbox. Des suggestions sur un itinéraire plus simple et plus direct pour la lecture automatique d'une vidéo YouTube?

pluginsvideosyoutubemedia-modal
1
Robert

Si vous avez codé en dur la vidéo youtube dans votre balisage, une solution serait d’ajouter ?autoplay=1 à l’URL src.

Par exemple: src="//www.youtube.com/embed/i8GZwagNZss?autoplay=1"

Faites-moi savoir si vous avez besoin d'aide supplémentaire.

1
Laniakea

J'avais développé un plugin wordpress qui affichait des vidéos youtube d'utilisateurs. Lorsque le bouton de prévisualisation est cliqué, une boîte épaisse apparaît et la vidéo de YouTube est lue automatiquement. Lorsque l'utilisateur a fermé la modale "boîte épaisse", la vidéo a continué à être lue, ce qui était extrêmement frustrant (je développe en chrome et je ne savais pas qu'il s'agissait d'un problème spécifique à Chrome).

Ma solution était d'écrire une minuterie JavaScript qui vérifiait toutes les demi-secondes si la div était cachée ou non. Si c'était le cas, j'ai supprimé le contenu du modal.

// hack to prevent iframe from playing when thicbox closes
window.setInterval(function(){
  if (jQuery('#TB_ajaxContent').is(":visible")){
      return;
  } else {
      jQuery('#wp2yt-uploader-preview-video').html('');
  }
}, 500);

Peut-être que vous pourriez faire quelque chose comme:

// hack to prevent iframe from playing when thicbox closes
window.setInterval(function(){
  if (jQuery('#fancybox-overlay').is(":visible")){
      return;
  } else {
      jQuery('#fancybox-content').html('');
  }
}, 500);

Mais il me semble que cela fonctionne maintenant.

1
EHerman