如何实现Video全屏宽度及自定义高度？查阅资料未解决

嘿，我来帮你搞定这个视频尺寸的需求！要实现视频占满全屏宽度同时保持自定义高度，直接给video标签硬设宽高容易导致画面拉伸变形，咱们用容器配合CSS来处理会更稳妥，具体步骤如下：

步骤1：调整HTML结构 #

先把video标签里的width="700px"和height="50px"属性去掉，交给CSS来控制尺寸，修改后的HTML代码如下：

<div class="row">
  <div class="video-container">
    <video preload="auto" loop="" autoplay="" muted="">
      <source src="/uploads/MDclouds3-sunset.webmhd.webm" type="video/webm">
      <source src="/uploads/MDclouds3-sunset-H.264-for-VP.m4v" type="video/mp4">
    </video>
  </div>
</div>

步骤2：添加CSS样式 #

接下来给容器和video元素写CSS，实现全屏宽度+自定义高度，同时保证视频画面不会变形：

/* 视频容器：控制整体宽度和自定义高度 */
.video-container {
  width: 100%; /* 占满父容器宽度，实现全屏效果 */
  height: 100px; /* 自定义你想要的高度 */
  overflow: hidden; /* 裁剪超出容器的视频部分 */
  position: relative; /* 可选，让内部元素定位更灵活 */
}

/* 视频元素：适配容器并保持画面比例 */
.video-container video {
  width: 100%; /* 视频宽度占满容器 */
  height: 100%; /* 视频高度匹配容器 */
  object-fit: cover; /* 保持视频比例，裁剪超出部分（推荐），也可以用contain让完整显示但可能留黑边 */
}

补充说明 #

• object-fit: cover：会让视频按比例缩放，填满整个容器，超出部分会被裁剪，适合想要铺满容器且不变形的场景；
• 如果想要完整显示视频画面，不想裁剪，可以把object-fit改成contain，但这样可能会在容器上下或左右出现黑边；
• 如果你的.row类有默认的padding或margin，记得检查一下，避免影响全屏宽度的效果。

这样设置后，视频就能完美实现全屏宽度+自定义高度的显示效果啦！

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