當youtube video id完成後，fancybox如何自動關閉？

Question

當youtube視頻結束時，如何讓fancybox自動關閉？

Answer 1

這並不簡單，因爲它聽起來：

• 首先確定您是否打算使用嵌入或iframe的球員。
• 按照embed player API或iframe player API示例初始化API。
• 彈出窗口打開後，使用"onComplete" fancybox callback函數來設置播放器。
• 在回調中，確保你添加一個onStateChange事件偵聽器，這樣你就可以決定當視頻已經完成（零值表示影片已結束）
• 一旦您發現該視頻已經結束，然後使用$.fancybox.close關閉彈出窗口的方法

或者，您可以讓用戶關閉彈出窗口。

Answer 2

環顧四周沒有這裏的任何運氣後，我想出了

看看有什麼我們做什麼，看這裏的視頻

<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 3

是的，這是處理到的fancybox或顏色框以正確的方式解決。 YouTube的視頻API提供了不同的狀態來處理這種情況像unstarted = -1，結束= 0，播放= 1，暫停= 2，緩衝= 3，視頻提示= 5

fancybox jquery代碼塊獲取或traping狀態可以輕鬆實現這一點。只要訪問這篇文章，並進行適當的演示。 Visit here

Answer 4

這是Fancybox-Youtube-Cookie-Autoclose-Autopopup的完整腳本，只需下載css所需的圖片，將它們放入根目錄中的/ fancybox文件夾中，並替換爲您的視頻ID。真正起作用的全面測試...

<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({ 
 
\t \t 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 \t 
 
    }); // ready 
 
    } // cookie else ready 
 
}); // function for cookie 
 
} // youtube API ready 
 
</script>