Lightbox Plus ColorBox plugin and auto playing YouTube video

Question

I'm using WP v3.6 and v2.6 of the plugin and using inline lightboxes to open a YouTube video embeded with an iframe. My boss wants the video to play when the lightbox opens. So originally I tried:

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(); }
    });
});

However, that didn't work. I eventually figured out that the plugin is stopping the video that is playing in lightbox when it's opened and closed, so my click event triggering play was too early. I then modified my call to:

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

Current sample page at https://test-cms.salesgenie.com/salesgenie-data-quality/

That worked in Chrome, but in all other browsers it only auto plays the video the second time it's opened in lightbox. Any suggestions on an easier, more direct route to auto playing a YouTube video?

Answer 1

If you've hardcoded the youtube video's in your markup then one solution would be adding ?autoplay=1 to the src url.

For example: src="//www.youtube.com/embed/i8GZwagNZss?autoplay=1"

Let me know if you need further help.

Answer 2

I had developed a wordpress plugin that displayed a users youtube videos. When the preview button was clicked a thick box would appear and the YouTube video auto played. When the user closed the thick box modal the video continued to play which was extremely frustrating ( I develop in chrome so I wasn't aware it was a chrome specific issue ).

My solution was to write a JavaScript timer that checked every half a second if the div was hidden or not. If it was I removed the content contained in the 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);

Maybe you could do something like:

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

But it looks to me like you have it working now.