html中video高度100%,html - Video 100% width and height - Stack Overflow
·
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%);
}
更多推荐
所有评论(0)