0

我正在使用 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 中不行。

4

1 回答 1

0

我找到了答案，它与这里的任何东西都完全无关。我有一个额外的 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;
于 2013-06-10T19:56:02.227 回答