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

user_14781362 0
Viewed 3042

I'm following a video to code a fully responsive website, but I can't seem to be able to make the background video full screen like in the video, maybe I'm missing a line of code? You'll see on the screenshot a big white space at the bottom. I'll leave some code below, hopefully that'll help to find the issue. Many thanks!

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>
)
}

styling:

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

Screenshot

reactjs responsive background css javascript
2 Answers

Set the position: fix, along with top & left properties. this will ensure the entire background area is covered.

In your case this will be in the variable VideoBg

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

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

user_49213190

try setting the height of your HeroBg to 100vh instead of 100%;

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