Остановить flexslider при воспроизведении видео

Question

Я использую плагин flexslider, чтобы показать картинку и видео. Слайды меняются автоматически, и со мной все в порядке. Проблема в том, что когда пользователь воспроизводит видео (iframe from youtube), flexslider продолжает изменять слайды.

Я проверил документацию и нашел pauseOnHover, что вроде бы делает трюк, но я бы предпочел, чтобы он приостановился, когда видео было запущено и продолжалось, когда видео приостановлено/закончилось. Любые предложения о том, как справиться с этим?

EDIT

Вот DIV, в котором открыт 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) 
}