How to Put Live Photos on a Website (iPhone and Android)
Live Photos do not just work on the web. Here is how to export the image and video pair, embed it with a zero-dependency web component, and keep the page fast.
A Live Photo is not a single file on the web. Apple stores it as a still image plus a short video, and Android vendors pack everything into one Motion Photo file. That is why dropping a Live Photo into a web page usually produces a static photo at best — and a broken media element at worst.
This guide covers the practical path: get the pair out of the phone, embed it so it plays, and keep the page fast.
1. Export the image and video pair
iPhone. Open the Live Photo in Photos, tap Share, then choose the option to export the original files. Depending on your iOS version this is Duplicate as Photo plus separate video, or Save to Files with the original. You need two files: a still (HEIC or JPEG) and a MOV or MP4 of a few seconds.
Android. Google Photos and most vendor galleries can export a Motion Photo as a separate JPEG plus MP4. If the gallery only offers the single Motion Photo file, the browser component can detect it directly (see below).
2. Embed it with a web component
The simplest path is a zero-dependency component that renders the pair and handles playback:
<live-photo photo=“/images/cover.jpg” video=“/videos/clip.mp4” width=“600px” muted=“true”></live-photo>
Install it with npm or load it from a CDN:
npm install live-photo-component
Then register the element once on the page. On mobile, long-press plays the clip; on desktop, hover plays where supported. The component also detects original Android Motion Photos and paired Apple files when the user uploads them.
3. WordPress
If you run WordPress, the same engine is packaged as a Gutenberg block: install the plugin, add the “Live Photos” block, and pick the cover image and video from the media library. See the component and plugin page for the download.
4. Keep it fast
- Preload only the still image; load the video lazily or on interaction.
- Keep clips short — two to four seconds is plenty.
- Re-encode to H.264 MP4 for the widest support.
- Always set a poster image so the layout does not shift.
Why not just use a video tag?
You can, but a plain video tag cannot tell the difference between a still, a Motion Photo and a real video, and it will download the video immediately. A dedicated element keeps the still as the default and only pays for the video when the user engages.