如何让视频适合指定区域？答案

【问题标题】：How do I get a video to fit in a specified area?如何让视频适合指定区域？
【发布时间】：2016-02-16 20:45:44
【问题描述】：

如何将视频适合指定区域？我正在尝试将我的 960 像素 x 500 像素 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;
}

【问题讨论】：

标签： html css video html5-video

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您可以做几件事。首先将视频的宽度和高度更改为 100%，以便视频播放器填充 mainvideo 容器。接下来，在 CSS 中将填充和边距设置为 0px。最后，您不需要“”，因为它不是元素。下面是我修改的代码。祝你好运！

HTML

<div id="mainvideo">
    <video width="100%" height="100%" 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.
    </video>
</div>

CSS

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

【讨论】：

我帖子中的“”应该是“/source”。