Flexslider youtube 클릭 가능 영역

Question

나는 Flexslider 2를 사용하여 YouTube iFrames의 간단한 재생 목록을 만듭니다. 슬라이드 및 기타 등등을 변경할 때 youtube를 일시 중지하는 코드를 받았지만 큰 문제는 YouTube 컨트롤 영역입니다. FitVids.js에서 파생 된 것으로 생각되어 iframe 클릭 가능 영역을 위로 올려 놓을 수 있습니다. 이상한 점은 코드에서 FitVids.js를 가져 오면 Flexslider 2가 더 이상 iframe에서 작동하지 않는다는 것입니다.

클릭 가능한 영역은 왼쪽 상단 200px 및 400px 주위에 있습니다. 비디오의 너비는 960px이며 높이가 필요한 모든 fitvids가 있습니다. 난 그냥 발견 모든 파이어 폭스 크롬에서가 아니라 잘 작동

$(window).load(function() { 
    function ready(player_id) {    
     var froogaloop = $f(player_id);    
     froogaloop.addEvent('play', function(data) {     
      jQuery('.flexslider').flexslider("pause");   
     });    

     froogaloop.addEvent('pause', function(data) {    
      jQuery('.flexslider').flexslider("play");   
     });   
    } 

    // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved. 
     $(".flexslider").fitVids().flexslider({ 
      animation: "slide", 
      animationLoop: false, 
      smoothHeight: true, 
      slideshow: true, 
      pauseOnHover:true, 
      useCSS: false, 
      video: true, 
      before: function(slider){ 
       if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0) 
         $f(slider.slides.eq(slider.currentSlide).find('iframe').attr('id')).api('pause'); 
       // ------------------ YOUTUBE FOR AUTOSLIDER ------------------ 
       playVideoAndPauseOthers($('.flexvid iframe')[0]); 
      } 
     }); 

    function playVideoAndPauseOthers(frame) { 
     $('iframe').each(function(i) { 
      var func = this === frame ? 'playVideo' : 'stopVideo'; 
       this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); 
     }); 
    }; 

    // ------------------ PREV & NEXT BUTTON FOR FLEXSLIDER (YOUTUBE) ------------------ 
     $('.flex-next, .flex-prev').click(function() { 
      playVideoAndPauseOthers($('.flexvid iframe')[0]); 
    }); 


}); 

편집 : 여기

내가 사용하고있는 코드입니다.

Answer 1

답변을 찾았지만 여기에는 전혀 관련이 없습니다. 내 iframe에 추가 클래스를 제공하는 추가 jquery 조각이 있습니다.

기본적으로 다음 CSS 속성이 iframe으로 인해 망가졌습니다. 나는 전환 효과를 사용할 때 CSS3 전환을 사용할 때 그래픽 버그를 없애기 때문에 이것을 다른 객체에 사용합니다.

-moz-perspective: 1000; 
-moz-backface-visibility: hidden; 
-webkit-perspective: 1000; 
-webkit-backface-visibility: hidden; 
-ms-perspective: 1000; 
-ms-backface-visibility: hidden; 
-o-perspective: 1000; 
-o-backface-visibility: hidden; 
perspective: 1000; 
backface-visibility: hidden;