jPlayer + пользовательские элементы управления + относительный родитель = нет полноэкранного режима?

Question

У меня есть видео компонент jPlayer на странице.Я написал для нее пользовательские элементы управления, так как они должны быть сильно стилизованы.Я хочу, чтобы полноэкранная кнопка расширяла видео, чтобы охватить весь видовой экран, кроме заголовка.Проблема в том, что видео находится в относительно позиционированном элементе div, поэтому, когда я устанавливаю его верхнюю, левую и абсолютную позиции, он только заполняет этот div.

Структура:

<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>

Яв настоящее время используются два видеопроигрывателя, которые «синхронизируются» и нажатие на полноэкранный режим одного запускает другой, но это не элегантно и требует нескольких хаков для работы.

Есть ли какой-нибудь хороший способ сделать это?Я не могу отсоединить и снова подключить видео узел, так как это сломает jPlayer, когда он использует резервный флэш-память.

Answer 1

Наверное, для вас поздно, Томас, но вот что я получил, работая по похожему сценарию. Это заняло два шага.

Шаг 1: Установить положение: исправлено в классе .jp-video-full.

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

Шаг 2: Добавьте событие изменения размера в конструктор jplayer, который устанавливает ширину ширины окна браузера и обратно при восстановлении с полного экрана.

$("#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);
        }
    }
});