WordPress – Lightbox Plus ColorBox plugin and auto playing YouTube video

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 video playing in it on open and close, so my click event triggering play was too early. So I modified my call to:

Read More
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 second time the lightbox is opened. Any suggestions on an easier, more direct route to auto playing a YouTube video?

Related posts

Leave a Reply