如何仅调整video标签宽高实现其与poster设置的封面尺寸完全一致

解决方案 #

首先你需要提前获取poster属性对应封面图的原始宽高/宽高比，再根据你的使用场景调整video标签的宽高属性即可，具体修改方式如下：

场景1：固定尺寸与封面完全匹配 #

直接将video标签的width、height属性设置为封面图的实际像素值即可，比如你的./img/4444a.jpg实际尺寸为1280px宽、720px高，修改后代码如下：

<div class="col-6">
  <div class="fullscreen-bg__video my-2 ">
      <video width="1280" height="720" controlslist="nodownload" poster="./img/4444a.jpg" controls="true" muted>
          <source type="video/mp4" src="./img/6f6035efab042985c4494cc976f23247.mp4">
          <span>当前浏览器不支持video标签</span>
      </video>
  </div>
</div>

注意：你原有代码中外层div的class属性多写了一个.前缀，已经修正，class属性值不需要写css选择器的点前缀。

场景2：自适应父容器宽度，同时保持封面比例 #

如果需要video宽度铺满父容器，只需要将height属性值改为auto，保留width="100%"即可：

<video width="100%" height="auto" controlslist="nodownload" poster="./img/4444a.jpg" controls="true" muted>

如果你的封面图宽高比和视频源本身的宽高比不一致，出现封面拉伸/压缩的情况，可以给video标签添加object-fit: contain样式保证封面完整显示：

<video width="100%" height="auto" style="object-fit: contain;" controlslist="nodownload" poster="./img/4444a.jpg" controls="true" muted>

内容的提问来源于stack exchange，提问作者mahnaz