使视频响应（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

中也使用此功能

测试网站链接位于http://chummy-taro.cloudvent.net/

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

Answer 1

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

以下示例

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望有所帮助

Answer 2

a）从班级中删除固定的高度，宽度。

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

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

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

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