jquery - Fancybox - Video auto close function

Question

i'm using a Fancybox Media. I want to when the video complete, close the fancybox..

Here is my code:

$('.fancybox-media').attr('rel', 'media-gallery').fancybox({
    openEffect : 'none',
    closeEffect : 'none',
    prevEffect : 'none',
    nextEffect : 'none',
    arrows : false,
    padding : '0',
    margin: '0',
    width: '100%',
    height: '100%',
    helpers : {
        media : {
            youtube : {
                params : {
                    autoplay : 1,
                    rel : 0,
                    controls : 0,
                    showinfo : 0,
                    autohide : 1
                }
            }},
        buttons : {}
    }
});

Answer 1

Here it's the recipe :

1). Load the youtube's player API into your page.

2). Create 3 functions :

• onYouTubePlayerAPIReady - listens for youtube's API :

  function onYouTubePlayerAPIReady() { .. }
  

  then place your fancybox initialization code (including the .ready() method) inside this function like :

  function onYouTubePlayerAPIReady() {
      $(document).ready(function () {
          $('.fancybox-media').attr('rel', 'media-gallery').fancybox({
              // fancybox API options
              ... etc.
          }); // fancybox
      }); // ready
  }
  

• onPlayerReady - listens for youtube's player :

  function onPlayerReady(event) {
      event.target.playVideo();
  }
  

• onPlayerStateChange - listens for youtube's player changes,?including the video end. Here we call the fancybox close method :

  function onPlayerStateChange(event) {
      if (event.data === 0) {
          $.fancybox.close();
      }
  }
  

3). Now use the fancybox beforeShow callback to bind the last 2 functions to your fancybox (youtube) content like :

beforeShow: function () {
    var id = $.fancybox.inner.find('iframe').attr('id');
    var player = new YT.Player(id, {
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    });
}

See JSFIDDLE

---

EDIT (Feb 3rd. 2014):

@fightstarr20 said :

This method doesn't appear to work on iPhone or iPad, any idea why?

It seems like youtube converts videos played in iOS devices into HTML5 format. Somehow, the autoplay option inside the function

function onPlayerReady(event) {
    event.target.playVideo();
}

... doesn't let youtube to convert the video properly and it just hangs.

The alternative solution is to detect mobile devices and only perform event.target.playVideo(); for desktop agents so, you could do this

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

See forked JSFIDDLE that should work for iOS and desktop devices alike.

NOTE: you could add your preferred device detection method. I found mine simple and reliable so far.