我怎样才能让我的背景视频全屏反应？

Question

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

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

设置位置：固定，以及顶部和左侧属性。这将确保覆盖整个背景区域。

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

中

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

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

Answer 2

尝试将 HeroBg 的高度设置为 100vh 而不是 100%；

export const HeroBg = styled.div`
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden;
 `

我怎样才能让我的背景视频全屏反应？

How can I make my background video full screen in react?

javascript

css

background

reactjs

responsive