Search code examples
javascriptcssflowplayer

Flowplayer breaks when resize with css FireFox

I am using flowplayer and I created some html buttons which change things on the player. One of the things I do is change the size of the player when you hit the button. I have achieved that by just giving it a new class name which has its own css styling.

This works in IE7 and 8, chrome, safari, opera but in FireFox I am having problems.

whenever the resize button is clicked the player seems to reload and go back to the beginning. 

flowplayer($('.player').children('.video').attr('id'), {src: 'js/flowplayer-3.2.7.swf',wmode: 'opaque', allowfullscreen: false}, {
                clip:  {

        },
            plugins: {                        
            controls: null                                          
        },
            play: { opacity: 0 }
    });

When you press the button I call my function which looks like this just adding a new class and removing the old

function changeSize(){
        $('.player').removeClass('FSMODE');
        $('.player').addClass('videoplayer');
},
Solution

  • After much testing I have found the problem, this applies to firefox only it seems.

    After flowplayer is loaded with the initial css you apply to it, any changes to after that to css position, overflow, and display will cause the player to reload.

    Hope this helps someone