Question

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

可点击区域位于左上角，高200像素，宽400像素。视频的宽度为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]);
    });


});

修改的我刚刚发现Chrome中的一切都运行正常但不是Firefox。

Answer 1

我找到了答案，这与此处的任何内容完全无关。我还有一个额外的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;

Flexslider youtube可点击区域

1 个答案: