<video>
何もトリミングされないように、ウィンドウの幅と高さに合わせてサイズを変更する絶対配置要素に HTML5 を含めることは可能ですか? 私が見た多くのソリューションは、私が持っていないタグに依存しているように見え<iframe>
ます。または、幅に基づいてサイズを変更するだけです (これは既に実行できます)。
基本的に、ビデオをできるだけ大きくする方法を探していますが、ウィンドウのサイズが変更された場合でもトリミングされないようにする方法を探しています.IE9でも. (注: ビデオは比率を維持する必要があるため、黒いバーがあっても問題ありません。)
これは私がこれまでに試したことです。
/*CSS*/
#player-overlay {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000
z-index:999;
}
<!--HTML-->
<div id="player-overlay">
<video width="100%" video="100%" style="width:100%, height:100%">
<source src="../static/video/10s.mp4" />
<source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
代わりに、JS ソリューションを試して作成する必要があるようです。