title: How can I make my background video full screen in react?
body: <p>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!</p>
  <p>index.js:</p>
  <pre><code>return (
      &lt;HeroContainer&gt;
          &lt;HeroBg&gt;
              &lt;VideoBg autoPlay loop muted src={Video} type='video/mp4' /&gt;
          &lt;/HeroBg&gt;
          &lt;HeroContent&gt;
              &lt;HeroH1&gt;Estudio Contable&lt;/HeroH1&gt;
              &lt;HeroP&gt;
                  Consultá por nuestros servicios.
              &lt;/HeroP&gt;
              &lt;HeroBtnWrapper&gt;
                  &lt;Button 
                      to='contactanos' 
                      onMouseEnter={onHover} 
                      onMouseLeave={onHover}
                      primary=&quot;true&quot;
                      dark=&quot;true&quot;
                  &gt;
                      Contactanos {hover ? &lt;ArrowForward /&gt; : &lt;ArrowRight /&gt;}
                  &lt;/Button&gt;
              &lt;/HeroBtnWrapper&gt;
          &lt;/HeroContent&gt;
      &lt;/HeroContainer&gt;
  )
  }
  </code></pre>
  <p>styling:</p>
  <pre><code>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;
  `
  </code></pre>
  <p><a href="https://i.stack.imgur.com/wOshB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wOshB.jpg" alt="Screenshot" /></a></p>