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.