Fancybox - Video auto close function

问题:

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

回答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.

回答2:

for those who are trying to achieve for fancybox version 3.3.5

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

回答3:

this is the full script with Fancybox-Youtube-Cookie-Autoclose-Autopopup just download the images that required in css put them in /fancybox folder in your root and replace with your video id. Really works fully tested...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
 <script type="text/javascript"> 
// 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();
    }
}
function onPlayerStateChange(event) {
    if (event.data === 0) {
        $.fancybox.close();
    }
}
function onYouTubePlayerAPIReady() {
$(function() {
    if ($.cookie('welcome_video')) {
        // it hasn't been three days yet
    } else {
        // set cookie to expire in 3 days
        $.cookie('welcome_video', 'true', { expires: 3});
    $(document).ready(function () {
        $.fancybox.open({
		href: "https://www.youtube.com/embed/qm1RjPM9E-g", /*YOUR VIDEO ID*/
            helpers: {
                media: {
                    youtube: {
                        params: {
                            autoplay: 1,
                            rel: 0,
                            // controls: 0,
                            showinfo: 0,
                            autohide: 1,
                        }
                    }
                },
                buttons: {}
            },
            beforeShow: function () {
                var id = $.fancybox.inner.find('iframe').attr('id');
                var player = new YT.Player(id, {
                    events: {
                        onReady: onPlayerReady,
                        onStateChange: onPlayerStateChange
                    }
                });
            }
        }); // fancybox	
    }); // ready
   } // cookie else ready
}); // function for cookie
} // youtube API ready
</script>