html - 如何让视频适合指定区域？

Question

我如何将视频适合指定区域？我试图让我的 960px x 500px video 适合相应的匹配区域，但是当我尝试这样做时:

我想让视频适合红色区域。

这是我的 HTML:

<div id="mainvideo">
<video width="960" height="500" controls>
<source src="videos/moikitvideo.mp4" type="video/mp4">
<source src="videos/moikitvideo.webm" type="video/webm">
 Your browser does not support the video tag.
</source>
</source>
</video>
</div>

这是我的 CSS:

#mainvideo{
  width: 960px;
  height: 500px;
  float:left;
  margin-top:10px;
  background-color:#75A96F;
}

Answer 1

我相信这是由于填充。没有 jsfiddle 或任何我无法真正分辨的东西。试试这个:

#mainvideo{
  width: 960px;
  height: 500px;
  float:left;
  margin-top:10px;
  background-color:#75A96F;
  padding: 0;
}

这也可能是由于视频比例本身。我不会担心高度并专注于宽度。确保宽度适合并允许高度缩放。因此，一旦您的视频完全适合宽度，请将高度设置为 100% 或自动。