Laphs: Live Photos on the Web

Add support for Apple's Live Photos on the Web! Brought to you by Tumblr.

Demo

Click and hold down the following image to see it move.

Easy Setup

First, add the JavaScript library to your page. If you prefer, you can install it from npm instead.

Next, add the special data attributes to your image markup:

<img src="STILL-PHOTO.jpg" data-live-photo="LIVE-PHOTO.mov" data-live-photo-still-image-time="1.71"/>

Finally, include the following code snippet at the bottom of your page:

<script>LivePhotos.initialize();</script>