Fix: Prevent Videos from Auto-Expanding to Fullscreen in iOS Safari

Have you ever noticed videos on your website suddenly going fullscreen when users scroll on iOS? This unexpected behavior can frustrate users and disrupt their browsing experience. Let's fix that.

The Problem

iOS Safari has a default behavior of expanding videos to fullscreen when users interact with the page. This "feature" aims to improve video viewing on mobile devices but often creates a jarring experience for users who simply want to scroll through content.

The Solution

Three key steps will prevent this behavior:

1. Add the playsinline attribute to your video elements:

<video playsinline webkit-playsinline>

Implementation Example

Here's a jsx example that implements these fixes:

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

Why It Works

The playsinline attribute tells iOS Safari to play videos inline rather than fullscreen. The webkit-prefixed version ensures compatibility across different iOS versions.