Skip to main content

HTML 5 Video Embed Format

February 25, 2023
html
Finding the proper format of the html 5 video embed element to play correctly on all devices
Table of Contents

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.

Comments