On mobile, ReactJS background video (styled components) jumps to the full screen and you have to swipe it away to remove it. How do you fix this?

I'm having this issue on mobile where the video scales to full screen after the page loads, and then I have to swipe it away to see the website. I'm using this as an example but my code is similar: https://qdync.csb.app/ (based on this repo: https://github.com/SmashTapsOS/reactjs-videobg)

For my code, I used styled components and this is what the index.js code snippet looks like for the video background:

<HeroBackground>
  <VideoBackground 
    autoPlay 
    loop 
    muted 
    src={Video} 
    type='video/mp4'
    allowFullScreen
    allowfullscreen='true'
    playsInLine
    controls={false}
  >
  </VideoBackground>
</HeroBackground>

However, when the page loads on mobile, the video jumps to the front and goes full screen on my phone (as if it was a Netflix video), rather than having the image of the video show as the background image on mobile.

There is a GitHub post about this where you need autoPlay loop muted playsInLine for this to work: Adding a background video with React?

Any ideas how to get this to not jump into full screen mode on mobile? It's 1000% perfect on desktop (non-mobile) version, however. It's just that pesky mobile version that's messing up the video.