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

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More