このフィドルを見てくださいhttp://jsfiddle.net/rwbcf/
16:9 ディスプレイの場合:
アスペクト比が 16:9 以外のディスプレイを使用すると問題が発生します。
ビデオの下部に大きな空白が表示され、ブラウザ ウィンドウのサイズを変更する (幅を小さくする) ほど、空白がどんどん大きくなります。
この空きスペースを削除するためのスケーリング、トリミング、ズームなどの解決策はありますか? わかりません。前もって感謝します
HTML
<div id="video-viewport">
<video id="bg" autoplay loop preload="none" tabindex="0">
<source src="http://goo.gl/MkY4i" type="video/mp4" />
</video>
</div>
CSS
html, body {
min-width:100%;
background:#000;
overflow:hidden;
}
body{
margin: 0;
padding: 0 ;
}
#bg {
width:100%;
height:auto;
}
#video-viewport {
overflow: hidden;
width:100%;
height:100%;
z-index: -1; /* for accessing the video by click */
}