CODEWITHSUNDEEP
reactjsvideomobileautoplay
Green
Green

Reputation: 1761

Video autoplay does not work on mobile (React)

I am using React and want my video background to autoplay on mobile devices. It used to, but then stopped (for an unknown reason as I did not change the code). How can I get the video to autoplay on mobile?

Here is what I have tried (and all failed):

<video autoPlay loop muted playsinline >
  <source src={video} type="video/mp4" />
</video> 

<video loop={true} playsinline={true} muted={true} autoPlay={true}>  
  <source src={video} type="video/mp4" />
</video> 

dangerouslySetInnerHTML={{
 __html: `<video className="app__backgroundVideo" autoplay loop muted playsinline>
       <source src=${video} type="video/mp4" />
       Your browser does not support the video tag.
 </video>`,
           }}

Upvotes: 0

Views: 1482

Answers (1)

Green
Green

Reputation: 1761

I found an answer to this problem. The code I had written above was correct, but Safari will not auto-play a video if your iPhone is in low-power mode. This is why the video was not auto-playing, and not because of an error with the code.

Upvotes: 1

Related Questions