How to make fancybox auto closed when you made youtube video?

Question

How can I make fancybox auto closed when youtube video ends?

Answer 1

It is not as simple as it seems:

• First determine if you are going to use the built-in or iframe player.
• Follow the embed player API or iframe API examples to initialize the API.
• Use the "onComplete" fancybox callback functon to configure the player when the popup is open.
• In the callback, make sure you add the onStateChange event onStateChange so that you can determine when the video has finished (a value of zero means the video has ended)
• Once you find that the video has ended, use the $.fancybox.close method to close the popup

or, you can just let the user close the popup.

Answer 2

this is a complete script with Fancybox-Youtube-Cookie-Autoclose-Autopopup, just upload the images you need in css, put them in the fancybox folder in your root and replace 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> 

Answer 3

After inspecting without luck, there is a solution that I came up with

See what we do, watch the video here.

 <div style="display: none;"> <div id="player"></div> </div> <script src="http://www.youtube.com/player_api"></script> <script> $(document).ready(function () { $("a.video_button").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none' }); }); // create youtube player var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 's19V_6Ay4No', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // autoplay video function onPlayerReady(event) { } // when video ends function onPlayerStateChange(event) { if(event.data === 0) { $(document).ready(function () { parent.$.fancybox.close();}); } } </script> 

Answer 4

Yes, this is the right way to handle fancybox or colorbox. The Youtube Video API provides various states for processing such as unparted = -1, end = 0, play = 1, paused = 2, buffering = 3, video cued = 5

Getting or tracking this state in a jQuery fancybox code block can be easily achieved. Just visit this article with a proper demo. Visit here