如何让我的背景视频全屏响应？

Posted 2023-02-19

【中文标题】如何让我的背景视频全屏响应？

【英文标题】：How can I make my background video full screen in react?

【发布时间】：2021-05-07 15:12:39

【问题描述】：

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

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

【参考方案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/

【参考方案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;
 `