jPlayer + custom controls + relative parent = no fullscreen?

I have a jPlayer video component on a page. I have written custom controls for it as they need to be heavily styled. I want the fullscreen button to expand the video to cover the entire viewport except for a header. The problem is that the video is inside a relatively positioned div so when I set its position to top,left and absolute it only fills up this div.

Structure:

<div id="header"></div><!-开发者_运维问答-This should be visible, even in fullscreen-->
<div id="wrapper"><!--I want the video to fill this wrapper when fullscreen is toggled-->
    <div id="internalContainer"> <!--This is relatively positioned and smaller than the wrapper-->
        <video/><!--This is the video I want to expand-->
    </div>
</div>

I am currently using two video players that "sync up" and clicking fullscreen in one triggers another, but it's not elegant and requires several hacks to work.

Is there any good way of doing this? I cannot detach and reattach the video node as this will break jPlayer when it uses the flash fallback.

Probably late for you Thomas, but here's what I got working in a similar scenario. It took two steps.

Step 1: Set position: fixed on the .jp-video-full class.

.jp-video-full { position: fixed; top: 0px; left: 0px; }

Step 2: Add a resize event to the jplayer constructor that sets the width to the browser window width and back when restoring from full screen.

$("#jquery_jplayer_1").jPlayer({
    resize: function(){
        if ($("#jp_container_1").is('.jp-video-full')) {
            $('div.jp-video-full').width($(window).width());
        } else {
            $('div.jp-video-360p').width(670);
        }
    }
});