How to fix HTML video issues in iOS Safari

HTML videos in iOS Safari seem to have unique behaviour compared to their Chromium & Firefox counterparts. While working through this issue, I found a few solutions to some painful problems.

My video expands when scrolling

Add the playsinline attribute to your video element.

<video autoplay muted width="250" playsinline>
  <source src="/videos/example.mp4" type="video/mp4" />
</video>

My background video pauses if pressed

Style the video element with user-select: none; to prevent the video from being paused when clicked or pressed.

<video autoplay muted width="250" playsinline style="user-select: none;">
  <source src="/videos/example.mp4" type="video/mp4" />
</video>

canplaythrough does not trigger

I’ve yet to solve this issue, but a helpful StackOverflow question about the audio element may have some hints.

This post is mostly to document my troubleshooting for the inevitable future problems I face, so if I get around to solving it, I’ll update this section with a code snippet.