3

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.

Super Kai - Kazuya Ito
  • 22,221
  • 10
  • 124
  • 129
InterstellarX
  • 712
  • 1
  • 8
  • 16

1 Answers1

0

You can add style={{ WebkitMediaControls: 'display(none)' }}

Icer
  • 1
  • 1