如何在React项目中实现背景视频全屏？排查底部白边问题

我正跟随视频教程开发全响应式网站，但无法像教程示例那样将背景视频设置为全屏，推测可能遗漏了某行代码。从截图可以看到页面底部存在大片留白，以下附上相关代码，希望能协助定位问题，非常感谢！

index.js 实现代码 #

return (
    <HeroContainer>
        <HeroBg>
            <VideoBg autoPlay loop muted src={Video} type='video/mp4' />
        </HeroBg>
        <HeroContent>
            <HeroH1>Estudio Contable</HeroH1>
            <HeroP>
                Consultá por nuestros servicios.
            </HeroP>
            <HeroBtnWrapper>
                <Button 
                    to='contactanos' 
                    onMouseEnter={onHover} 
                    onMouseLeave={onHover}
                    primary="true"
                    dark="true"
                >
                    Contactanos {hover ? <ArrowForward /> : <ArrowRight />}
                </Button>
            </HeroBtnWrapper>
        </HeroContent>
    </HeroContainer>
)
}

样式代码 #

export const HeroBg = styled.div`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
`
export const VideoBg = styled.video`
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
background: #232a34;
`

页面实际效果截图 #

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