Html 使视频具有响应性（100%的浏览器）

嘿，我不能让这个视频响应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>

在我的video.css中也使用这个

测试站点链接位于

---

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

将

视频

添加到css中的

.section video

类中，如下所示：

.section video{

下面的例子

。视频部分{
宽度：100%；
位置：相对位置；
录像带{
对象匹配：包含；
}

a）从课堂上删除固定高度和宽度

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

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

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

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

---

他们刚刚尝试过，没有改变。测试站点链接已更新。您在cssI中没有针对您的视频标签。视频部分视频{width:100%；position:relative；视频{object fit:contain；}仍然没有运气确切的问题是什么？你的视频加载吗？它对我有效，但我必须先添加一个视频源。这不是有效的CSS，那么是SASS还是什么？你需要标记它。此外，我们这些不使用预处理器的人帮不了你。你需要显示编译后的CSS。

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