On mobile, background video jumps to the full screen and you have to swipe it away to remove it

[BrianHHough]

Great explanation of a background video in React!!

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/

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, 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: https://stackoverflow.com/questions/36230522/adding-a-background-video-with-react/36230644

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.

[bzmillerboy]

I'm having the same issue and have found no resolution. https://stackoverflow.com/questions/72904728/background-video-launches-player-on-mobile

Mine only goes to fully video players on mobile and when I click the logo to navigate back home.