如何通过HTML/CSS设置MP4视频宽高 样式不生效解决方案

问题复现 #

尝试通过CSS修改MP4格式视频的宽高时，代码运行后视频尺寸未按设置参数变化，原始代码如下：

HTML部分 #

<link rel=”stylesheet” href=../../css/videos.css> ← 提问者标注该路径正确        

<table width="550" height="489" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="10"><img src="../../images/some/something.gif" width="10" height="489"></td>
        <td>
            <video controls autoplay loop muted class="videos">
              <source src="something.mp4" type="video/mp4">
            </video>
        </td>
      </tr>
</table>

CSS部分（videos.css） #

.videos {
    width: 450px;
    height: 450px;
}

问题原因与修复方案 #

1. 修复CSS引入标签的语法错误（核心原因） #

原代码的link标签存在两处语法错误，会直接导致CSS文件完全无法加载，所有写在videos.css里的样式都不会生效：

• rel属性的引号使用了中文全角弯引号”，必须替换为英文半角双引号"
• href属性的文件路径没有用引号包裹，不符合HTML语法规范，会导致路径解析失败

修正后的link标签写法：

<link rel="stylesheet" href="../../css/videos.css">

2. 补充视频适配属性，避免显示异常 #

修正CSS引入问题后，如果视频显示比例不符合预期，是因为固定宽高下视频默认会保持原始宽高比，不会自动拉伸铺满容器。可以通过object-fit属性控制视频在固定尺寸容器内的显示规则，补充到CSS规则中即可：

.videos {
    width: 450px;
    height: 450px;
    /* 根据实际需求选择对应值即可：
       - contain：保持视频原始宽高比缩放，完整显示全部内容，容器内可能出现留白
       - cover：保持视频原始宽高比缩放，铺满整个容器，超出容器的部分会被裁剪
       - fill：强制拉伸视频填满容器，不保留宽高比，会出现画面变形
       - none：保留视频原始尺寸，不做任何缩放
       - scale-down：自动对比contain和none的显示效果，选择尺寸更小的方案展示
    */
    object-fit: contain;
}

3. 异常排查项 #

如果以上修改完成后样式仍未生效，可以按顺序排查：

• 打开浏览器开发者工具的Network面板，确认videos.css文件的请求状态为200，没有出现404资源找不到的情况
• 确认没有其他优先级更高的CSS规则覆盖了.videos选择器的宽高设置，可以在开发者工具的Elements面板选中video标签，查看实际生效的样式规则
• 确认测试浏览器支持HTML5 video标签，主流现代浏览器（Chrome、Firefox、Edge、Safari）均原生支持MP4格式视频播放

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