javascript - 我怎样才能让我的背景视频全屏 react ？

Question

我正在关注一个视频来编写一个完全响应式网站的代码，但我似乎无法像视频中那样使背景视频全屏显示，也许我缺少一行代码？您会在屏幕截图中看到底部有一个很大的空白区域。我将在下面留下一些代码，希望这有助于找到问题所在。非常感谢!

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;
`

Answer 1

设置 position: fix 以及 top 和 left 属性。这将确保覆盖整个背景区域。

在您的情况下，这将在变量 VideoBg

中

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

来源:https://css-tricks.com/full-page-background-video-styles/