For my site's redesign I've been experimenting with adding subtly moving backgrounds to a few pages. On the homepage, I've used an iOS Live Photo, which I then slowed by 2x using iMovie. For other parts of the site, I've been experimenting with animating illustrations. In the process, I've learned how to use ffmpeg to edit the videos and optimize them for the web.
Below is the three step process I've followed using ffmpeg, a command line tool for recording, converting or streaming video.
Step 1: Create a reversed version of the video
-an part removes any audio.
Step 2: Combine the original and reversed videos
Step 3: Create a WebM version for the web
This uses the AV1 codec, which results in a smaller file size, but can be very slow to convert and isn't yet supported by all web browsers.
Optionally shrink the dimensions, for example to 500x500: