Интерактивная область YouTube Flexslider

Я использую Flexslider 2 для создания простого списка воспроизведения iFrames YouTube. У меня есть код для приостановки YouTube при смене слайдов и тому подобного, но большая проблема - это область управления YouTube. Я думаю, это связано с тем, что FitVids.js заставляет кликабельную область iframe увеличиваться. Странно то, что если я уберу FitVids.js из кода, Flexslider 2 перестанет работать с iframe.

Интерактивная область находится в верхнем левом углу около 200 пикселей в высоту и 400 пикселей в ширину. Ширина видео составляет 960 пикселей, и все, что соответствует требованиям 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.


youtube flexslider
person GregT    schedule 10.06.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел ответ, и здесь он ни к чему не имел отношения. У меня был дополнительный кусок 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;
person GregT    schedule 10.06.2013