使视频响应（100% 的浏览器）

Question

嘿，我无法让此视频响应浏览器的 100% 宽度。

什么都试过了，就是不行。

HTML 是

<section class="section-video">
  <video id="321-video" class="video-js vjs-default-skin vjs-big-play-centered" controls poster="/img/video-poster.jpg" data-setup='{}'>
    <source src="http://media.tptg.co.uk/external_templates/video/321.mp4" type='video/mp4'>
    <source src="http://media.tptg.co.uk/external_templates/video/321.webm" type='video/webm'>
  </video>
</section>

CSS

.section-video {
  width: 100%;
  position: relative;
  video {
    object-fit: contain;
  }
}

也在我的 video.css https://pastebin.com/PLZHbRXQ

中使用它

测试站点 link 在 http://chummy-taro.cloudvent.net/

我只想让海报图片和视频达到最大宽度和自动高度。

Answer 1

将 video 添加到 css 中的 .section-video class，如下所示：.section-video video {

下面的例子

.section-video video {
  width: 100%;
  position: relative;
  video {
    object-fit: contain;
  }

<section class="section-video">
  <video id="321-video" class="video-js vjs-default-skin vjs-big-play-centered" controls poster="/img/video-poster.jpg" data-setup='{}'>
    <source src="http://media.tptg.co.uk/external_templates/video/321.mp4" type='video/mp4'>
    <source src="http://media.tptg.co.uk/external_templates/video/321.webm" type='video/webm'>
  </video>
</section>

希望对您有所帮助

Answer 2

a) 从 class.

中删除固定高度、宽度

.video-js {
/* width: 300px; */
/* height: 150px; */
}

b) 从视频中删除绝对位置：

.video-js .vjs-tech {
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* width: 100%; */
/* height: 100%; */
}

注意：如果您无法删除固定内联 width/height，我假设它是使用 JavaScript 添加的，您可以使用 CSS 覆盖它！重要（如果可能，将避免使用此解决方案）

使视频响应（100% 的浏览器）

Make video responsive (100% of the browser)

html

css

video

responsive