React+TypeScript项目全屏背景视频两侧白边问题求助

一步步排查最常见的原因，快速解决问题：

1. 检查根容器约束 #

很多React项目的根容器（比如id="root"的div）会自带默认样式，或者自定义父容器未设置全屏尺寸。打开浏览器开发者工具（F12）查看#root元素的盒模型，确认是否有多余的margin/padding，或宽高未占满屏幕。

解决方法：给根容器添加全屏样式：

#root {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

2. 确保视频父容器的定位与尺寸正确 #

视频使用absolute定位时，必须保证直接父容器设置了position: relative，且宽高占满屏幕，否则视频的定位基准会偏移，尺寸也会被限制。

示例父容器样式：

<div style={{
  position: 'relative',
  width: '100vw',
  height: '100vh',
  margin: 0,
  padding: 0,
  overflow: 'hidden'
}}>
  {/* 视频元素放在此处 */}
</div>

3. 调整视频元素的对齐规则 #

给视频添加top: 0; left: 0，确保它完全贴紧父容器左上角，避免偏移留白：

<video
  src="/your-video-path.mp4"
  autoPlay
  loop
  muted
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    zIndex: -1,
    objectFit: 'cover',
    pointerEvents: 'none'
  }}
/>

4. 排查浏览器默认样式覆盖 #

即使你设置了html, body的margin/padding为0，也可能被其他CSS规则覆盖。用开发者工具查看html和body的样式，确认margin: 0和padding: 0生效。若被覆盖，补充明确的全屏样式：

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

完整示例组件 #

整合以上步骤，可直接运行的首屏视频背景组件：

import React from 'react';

const HeroBackground = () => {
  return (
    <div style={{
      position: 'relative',
      width: '100vw',
      height: '100vh',
      margin: 0,
      padding: 0,
      overflow: 'hidden'
    }}>
      <video
        src="/videos/hero-bg.mp4"
        autoPlay
        loop
        muted
        playsInline
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          zIndex: -1,
          objectFit: 'cover',
          pointerEvents: 'none'
        }}
      />
      {/* 首屏内容区域 */}
      <div style={{
        position: 'relative',
        zIndex: 1,
        color: '#fff',
        textAlign: 'center',
        paddingTop: '30vh'
      }}>
        <h1>你的网站标题</h1>
      </div>
    </div>
  );
};

export default HeroBackground;

最后建议用开发者工具逐个检查元素的盒模型，找到留白的具体来源——这类问题大多是某个父容器的尺寸或边距未设置正确，是新手常见的入门坑。

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