宽屏幕上宽度为100％的视频

Question

当我将html5视频宽度和高度设置为100％时，视频高度大于浏览器可见区域，并显示垂直滚动条。

是因为我的视频采用4：3格式吗？如何调整大小以填充整个空间而无需向下滚动页面？

感谢阅读！

Answer 1

您需要使用javascript检查浏览器窗口高度，并将视频限制为小于此值。这是fiddle HTML：

<video id="vid1" controls>
    <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

CSS：

video {
    width:100%;
    height:100%;
}

使用Javascript：

window.onresize = function(event) {
  var h=window.innerHeight;  
  document.getElementById("vid1").style.maxHeight=h+"px";  
}