youtube - YouTube的Flexslider可点击区域

我正在使用Flexslider 2创建youtube iFrame的简单播放列表。我已经获得了在更改幻灯片等功能时暂停youtube的代码，但是最大的问题是youtube控制区域。我认为这源于FitVids.js，使iframe可点击区域得到了提升。奇怪的是，如果我从代码中删除FitVids.js，Flexslider 2将不再适用于iframe。

可点击区域位于左上角，高度约200像素，宽约400像素。视频的宽度为960像素，而适合的视频则视需要的高度而定。

这是我正在使用的代码:

$(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]);
    });


});

编辑
我刚刚发现，所有功能都可以在Chrome浏览器中正常运行，但不能在Firefox中运行。

最佳答案

我找到了答案，并且与这里的任何内容均无关。我还有另外一个jquery，它为iframe提供了一个附加类。

基本上，以下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;