flexslider 슬라이드 플러그인을 사용해서 지금 이미지를 사용하고 있습니다.

여기에 youtube 동영상 추가해서 사용할려고 합니다.

youtube 동영상 재생되면 flexslider 슬라이드가 중지되고 슬라이드 하면 yuotube 동영상을 정지시키고 싶습니다.

지금  youtube 동영상 재생되면 flexslider 슬라이드가 중지까지 구현되었는데

슬라이드 하면 yuotube 동영상을 정지가 안되고 계속 재생되는 문제를 해결 못해서 고수분들께 질문 합니다.

작성한  iframe과 스크립트는 다음과 같습니다.

<iframe width="100%" height="75%" src="//www.youtube.com/embed/yutube아이디?enablejsapi=1" frameborder="0" class="play3"></iframe>

<script type="text/javascript">   

$(window).load(function(){    

   $('.flexslider').flexslider({       

animation: "slide",      

 slideshow :false,      

 pauseOnHover: true,        

pauseOnAction: true,        

touch: true,      

 video: true,        

controlNav: true,      

 animationLoop: true,        

slideshow: true,        

useCSS: false,       

start: function(slider){         

   $('body').removeClass('loading');     

  },        

before: function(){                                      

   if(!canSlide)              

   {                  

    $('.flexslider').flexslider("stop");              

  }                              

 }     

});      

 $('.flexslider').on("click", ".flex-prev, .flex-next", function(){        canSlide = true;        $('.flexslider iframe').each(function(){            

$(this).data('player').pauseVideo();      

 });    

});  

 $('.flexslider').each(function()      

 {            

    $(this).find('ul.slides').height( $(window).height() - $("#divBottom").height() - 50);      

 });

    var slider,   canSlide = true;

    var tag = document.createElement('script');    tag.src = "//www.youtube.com/iframe_api";  

    var   firstScriptTag = document.getElementsByTagName('script')[0];                   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);  

 window.onYouTubeIframeAPIReady = function(){        

 $('.flexslider iframe').each(function(){          

  var player = new YT.Player(this, {                playerVars: {                    autoplay: 0                }            });             // Watch for changes on the player            player.addEventListener("onStateChange", function(state){              

 switch(state.data) {              

   case YT.PlayerState.PLAYING:                        

    slider.flexslider("stop");                      

    canSlide = false;                      

   break;                  

   case YT.PlayerState.ENDED:                  

   case YT.PlayerState.PAUSED:                        

  player.flexslider("play");                        

  canSlide = true;                      

  break;              

 }        

 });            

$(this).data('player', player);        

});  

 }}); 

</script>