當視頻播放時停止flexslider

Question

我使用flexslider插件來顯示圖片和視頻。幻燈片會自動更改，對我來說很好。問題是，當用戶播放視頻時（來自YouTube的iframe），flexslider將繼續更改幻燈片。

我檢查了文檔，發現pauseOnHover，這有點訣竅，但我更傾向於在視頻開始時暫停，並在視頻暫停/結束時繼續。有關如何處理這個問題的任何建議？

編輯

這裏就是IFRAME打開股利：

<div class="span6 animated fadeInLeftBig" id="main-media"> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/someID?version=3&enablejsapi=1" frameborder="0" allowfullscreen id="iframe-id"></iframe> 
    </div> 

Answer 1

來解決它的最好方法，就是使用YouTube API，somethnig這樣的：

//Implement Youtube API 
(function(){ 
    var s = document.createElement("script"); 
    s.src = "http://www.youtube.com/player_api"; /* Load Player API*/ 
    var before = document.getElementsByTagName("script")[0]; 
    before.parentNode.insertBefore(s, before); 
})(); 

var YT_ready=(function(){var b=[],c=false;return function(a,d){if(a===true){c=true;while(b.length){b.shift()()}}else if(typeof a=="function"){if(c)a();else b[d?"unshift":"push"](a)}}})(); 
YT_ready(function() { 
    (function($) { 
      var frameID = "yourIframeID" 
      var player = new YT.Player(frameID, { 
        events: { 
         "onStateChange": function(event) { 
          if (event.data == 1 || event.data == 3) { 
           $('.flexslider').flexslider("pause"); 
          } 
          else if (event.data == 0 || event.data == 2 || event.data == 5) { 
           $('.flexslider').flexslider("play"); 
          } 
         } 
        } 
       }); 
     }); 



    })(jQuery); 
function onYouTubePlayerAPIReady() { 
    YT_ready(true) 
}