宽屏上 100% 宽度的视频答案

【问题标题】：video with 100% width on a widescreen宽屏上 100% 宽度的视频
【发布时间】：2013-09-10 14:10:57
【问题描述】：

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

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

感谢阅读！

【问题讨论】：

可能与此 posting 重复

标签： html css video width

【解决方案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";  
}

【讨论】：

我添加了这段代码，但它并没有做我想要完成的事情，它只是在我调整浏览器大小时发生变化。我希望视频在页面加载时在水平和垂直方向上 100% 适合浏览器。还是谢谢。