jPlayer +カスタムコントロール+相対親=全画面なし？

Question

ページにjPlayerビデオコンポーネントがあります。私は彼らが大きくスタイルされる必要があるので、カスタムコントロールを書いています。ヘッダーを除くビューポート全体をカバーするようにフルスクリーンボタンでビデオを拡大したい。問題は、ビデオが相対的に配置されたdiv内にあることです。その位置を上、左、および絶対に設定すると、このdivを埋め尽くすだけです。

構造：私は現在、「アップ同期」と一つにフルスクリーンをクリックすると、別のトリガーが、それはエレガントではないと動作するようにいくつかのハックが必要であること、2人のビデオプレーヤーを使用しています

<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

おそらくあなたのために遅れています。トーマスですが、私はこれと同じような状況で働いています。それは2つのステップを必要とした。

ステップ1：設定位置：.jp-video-fullクラスで固定。

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

ステップ2：フルスクリーンから復元するときに、ブラウザウィンドウの幅と背面に幅を設定jplayerコンストラクタにresizeイベントを追加します。

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