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

Question

如何将视频适合指定区域？我正在尝试将我的 960px 乘以 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% 或自动。

Answer 2

您可以做几件事。首先将视频的宽度和高度更改为 100%，以便您的视频播放器填充主视频容器。接下来，在 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;
}

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

How do I get a video to fit in a specified area?

html

css

video

html5-video