为什么无法通过CSS或HTML属性修改video标签的宽度？

基础说明 #

HTML标签原生的width属性优先级低于CSS样式规则，你当前代码里同时写了CSS的#myVideo { width: 100% }，所以HTML标签上的width="290"本来就不会生效，想要这个属性生效需要先删掉CSS里的width声明。

宽度不生效排查&解决方法 #

• 检查样式覆盖
  按F12打开浏览器开发者工具，选中目标video元素，查看「样式」面板里的width属性是否被划掉。如果被划掉，就看上方生效的width规则来源：如果其他规则加了!important标记，你可以在自己的width规则后也加上!important覆盖，示例：

  #myVideo{
    width: 100% !important;
    height: 600px;
    object-fit: cover;
  }
  

• 检查父元素宽度限制
  CSS中width: 100%是相对于父元素宽度生效的，如果父元素设置了固定宽度、最大宽度限制，video的最大宽度也不会超过父元素的宽度，同步修改父元素的宽度规则即可。
• 检查CSS加载状态
  确认你的CSS代码写在<style>标签内，或者外部CSS文件的引入路径正确。可以在开发者工具的「网络」面板查看CSS文件是否加载成功，也可以直接在样式面板搜索#myVideo，如果找不到你写的规则，说明代码没有被正确加载。
• 清除缓存重试
  浏览器可能会缓存旧的CSS文件，按Ctrl+F5强制刷新页面，或者清除浏览器缓存后再查看效果。

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