フルスクリーンhtml5ビデオのサイズを変更する

Question

ビデオのフルスクリーン機能がブラウザでどのように動作するかを変更する方法はありますか？私は画面の左側にビデオを、右側には画像（実際にはPDF）を表示したいと思います。

私はクロームで、CSSでそれを試してみました：

video:-webkit-full-screen 

そして、それは私にいくつかの結果ではなく、必要なものを与えました。このためのカスタムアクションを作成する必要がありますか？もしそうなら、どうすればビデオがブラウザの境界から飛び出すのですか？

Answer 1

あなたは次の属性で定義されたheightとwidthで<div>内<video>タグを挿入する必要がありますwidth 100の％で

.video-container { 
    position: relative; 
    height: auto; 
    width: 60%; 
} 

video { 
    width: 100%; 
    max-width: 500px; // Or whatever value on your choice 
    height: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

どのように大きな、ビデオは、ブラウザ全体のスペースが、限度を埋めるだろう解像度と応答性については、max-widthまたはmax-heightに設定することができます。私の答えがあなたを助けることを願っています！ div内で適切に収まるように

EDIT

、あなたはビデオ自体にコンテナposition: relativeとposition: absoluteに割り当てる必要があります。ボーダーから脱出したい場合は、ビデオのmax-heightとmax-widthの寸法を微調整する必要があります。

これはあなたと似ているので、questionにチェックを入れてください。