Intro

If you are having an issue with a video element not autoplaying on some devices, like iphones, this may be your issue. Example are in JSX format.

Incorrect Format

<video
className="video"
poster={posterRef}
preload="none"
muted
autoPlay
loop
playsInline
src={srcRef}
>

Correct Format

The video source must be included as a sub-element, otherwise it will not play on iOS devices.

<video
className="video"
poster={posterRef}
preload="none"
muted
autoPlay
loop
playsInline
>
    <source src={srcRef} type="video/mp4" />
</video>

The above snippet works on all devices I have tested with h.264 mp4 file settings.

Codecs

There are some new codecs like h.265 which are really good, but aren’t widely compatible. For that reason just stick with h.264 mp4 exports.