1

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?

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.

  • Well that was a simple solution...for all browsers except Chrome. In Chrome the video autoplays even when it's in the hidden div in the page, not just in the lighbox. All other browsers don't play the video as long as it is display:none, but Chrome seems to ignore that. – Robert Sep 12 '13 at 17:49
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.