Search code examples
htmliosreactjsiphonesafari

the video automatically opens in the Safari browser, iphones

I have a section, where plays muted, looped video without contols access.

Just yesterday I found the problem with Safari browser, as it opens this video on full screen, with audio and controls enabled, and when video reaches its end, video just folds up like nothing happened. It happens every time when the page is rendered.

After spending some research, I tried to add playsinline (which is a playsInline in react), and even webkit-playsinline="true". But as it turns out, it allows for safari browser to open this video only when you scroll down to the view of this video. But I don't want it to be opened at all, I want it to stay static.

How do I prevent video from opening on full screen, on safari browser?

Here's example of how my video tag looks like:

<video autoPlay muted loop>
    <source
      type="video/mp4"
      src={mainVideo}
      autoPlay
      muted
      loop
      playsInline
      webkit-playsinline="true"
    ></source>
</video>
Solution

  • So you were actually right, adding the playsInline and webkit-playsinline="true" attributes to your video element. But safari can be unpredictable at times. So maybe try adding the controlsList attribute with the value nodownload to your video element. This attribute prevents the video controls from appearing, which might help in preventing the full-screen behavior.

    See code down.

    <video autoPlay muted loop controlsList="nodownload">
  
Hope that helps :)