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

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐