如何将 html5 视频拉伸到宽度：600 和高度 200？ [复制]答案

【问题标题】：How do I stretch a html5 video to width:600 and height 200? [duplicate]如何将 html5 视频拉伸到宽度：600 和高度 200？ [复制]
【发布时间】：2013-03-11 00:27:36
【问题描述】：

如何将 html5 视频拉伸到宽度：600 和高度 200？

当我尝试时，导航栏变大了，但视频仍然很小

代码：

<!DOCTYPE html>
<html>
<body>

<video width="600" height="200" controls>
  <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

</body>
</html>

Jsfiddle：http://jsfiddle.net/ke8HX/1/

【问题讨论】：

为我工作。顺便说一下，使用 Chrome。
@epascarello — 表示“按比例”，这并未指定为本问题的要求，并且根据是否成比例，方法会有所不同。
jsfiddle.net/ke8HX/6 你的视频没问题。由于白色背景，您只是看不到它。

标签： javascript css html video-player

【解决方案1】：

尝试将宽度和高度属性放在源标签上：

http://jsfiddle.net/ke8HX/8/

HTML

<video class="vid" controls=true>
  <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

CSS

.vid {}
.vid source { width:600px; height:200px;  }

【讨论】：

【解决方案2】：

这有点工作...不过，我认为您无法仅使用 CSS 修改实际的播放器控制栏。它甚至没有显示在我的 Chrome 开发者工具版本中作为要修改的 HTML 层。但是视频确实会重新调整！

CSS：

#vid, #vid source { width:600px !important; height:200px !important;}

HTML：

<video id="vid" controls=true>
  <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

The Demo

【讨论】：