React 中的全屏背景图片

Question

我正在尝试使用 typescript + React 创建一个网站，但遇到了一些问题。我已将一个视频嵌入到我的网站中，我想将其作为第一部分的背景，但无论我做什么，视频的两侧都有白色边框。我对 React 很陌生，所以如果有人能帮助我那就太好了！

网站现状

无论我做什么，我似乎都无法填写两边的两栏。

html, body {
    margin: 0;
    padding: 0;
  }

我已经将边距和填充设置为 0

style={{
                    position: "absolute",
                    width: "100%",
                    height: "100%",
                    zIndex: -1,
                    objectFit: "cover",
                    pointerEvents: "none",
                  }}

我还将视频的高度和宽度设置为 100%。

即使我更改CSS并将背景颜色设置为黑色，两侧的列仍然不会改变颜色。我知道这可能是一个超级新手错误，但我正在旋转我的轮子，并且希望有一个指针。

Answer 1

// App.jsx

function App() {
    return (
        <main
            style={{
                height: "100vh",
                position: "relative",
            }}
        >
            <video
                src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
                autoPlay
                muted
                style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",

                    position: "absolute",
                    top: 0,
                    left: 0,
                    zIndex: -1,
                    opacity: 0.7,
                }}
            />
            <div
                style={{
                    minHeight: "100vh",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                }}
            >
                <h1
                    style={{
                        fontSize: "50px",
                    }}
                >
                    Video is playing
                </h1>
            </div>
        </main>
    )
}
export default App

/* index.css */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}