如何调整WebRTC视频流尺寸？设置对应CSS未生效该如何解决

你写的#video-grid video { width: 300px !important; height: 300px !important; } 规则失效，通常是以下几类原因：

• 规则被更高优先级的样式覆盖：比如全局样式表中针对video元素的选择器、框架内置的组件样式，优先级高于你写的ID选择器规则
• JS动态注入的内联样式覆盖：WebRTC场景下很多初始化逻辑会在拿到摄像头流后，根据流的实际分辨率直接给video元素写入内联宽高，内联样式的优先级会直接覆盖外部CSS规则（哪怕你加了!important，如果内联样式本身也带!important就会失效）
• 父级布局的默认属性导致溢出：就算视频尺寸设对，嵌套的Flex/Grid列布局默认会被子元素的固有尺寸撑破边界，出现重叠溢出

• 第一步：定位实际覆盖来源
  打开浏览器开发者工具，选中溢出的视频元素，在计算样式面板中查看实际生效的宽高值，再到样式面板找到覆盖你规则的具体来源，针对性调整选择器优先级即可。
• 第二步：调整video-grid和视频元素的适配规则
  你之前写死300px宽高的方式，本身在响应式列布局里就容易因为列宽动态变化触发溢出，换成结合列布局特性的适配规则，从根源避免尺寸不匹配的问题：

  #video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 100%;
    overflow: hidden;
  }
  
  #video-grid video {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
  }
  

  这套规则会让视频自动适配容器宽度，保持固定宽高比不会变形，同时允许容器内的两个视频自动换行，不会挤在同一行互相重叠。
• 第三步：移除WebRTC初始化逻辑的动态样式干扰
  如果你在WebRTC初始化代码中看到类似下面的逻辑，直接删除或注释，把视频尺寸的控制权完全交给CSS：

  // 这类动态设置宽高的逻辑是常见问题来源
  localVideo.style.width = `${localVideo.videoWidth}px`
  remoteVideo.style.height = `${remoteVideo.videoHeight}px`
  

  如果不能直接删除这段逻辑，就用更高优先级的带ID的选择器覆盖动态注入的内联样式。
• 第四步：修复父级列布局的默认溢出问题
  这是Flex/Grid布局里最容易被忽略的默认属性坑：弹性列的默认min-width值为auto，会被内部的大尺寸视频内容直接撑破边界，就算子元素设了100%宽度也没用。只需要给嵌套#video-grid的父列元素补上规则：

  .column-parent {
    min-width: 0;
  }
  

  补充这个属性后，列元素才会真正遵守容器的宽度约束，不会被内部内容撑出去。

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