I use JavaScript and CSS to accomplish this. The JS function needs to be called once on init and on window resize. Just tested in Chrome.

HTML:

Your browser does not support the video tag.

JavaScript:

function scaleVideo() {

var vid = document.getElementsByTagName('video')[0];

var w = window.innerWidth;

var h = window.innerHeight;

if (w/16 >= h/9) {

vid.setAttribute('width', w);

vid.setAttribute('height', 'auto');

} else {

vid.setAttribute('width', 'auto');

vid.setAttribute('height', h);

}

}

CSS:

video {

position:absolute;

left:50%;

top:50%;

-webkit-transform:translate(-50%,-50%);

transform:translate(-50%,-50%);

}

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐