How do I integrate exercise videos into my fitness app?
The fastest way to integrate exercise videos is to call an exercise API that returns ready-to-render media URLs, then point your video or image component at them. With WorkoutDB, a single GET request returns the demo video (mp4/webm), an animated GIF, and photo URLs for each exercise — no transcoding or hosting on your side.
The integration in three steps
- Create a free API key and authenticate every request with an X-API-Key header.
- Fetch exercises — e.g. GET /v1/exercises/search?query=deadlift or GET /v1/exercises/{idOrSlug}. Each result carries the video, GIF, and photo URLs.
- Render the media: a <video> element on web, expo-av / a Video component in React Native, or an <img> for the GIF when you want a lightweight loop.
Tips for a smooth experience
Use the animated GIF for list and card previews (cheap, autoplaying loops) and the mp4/webm for the full exercise detail screen. Cache exercise records by slug — the catalog is stable, so you can store responses locally and only re-fetch occasionally.
Pick the resolution your plan allows: 480p mp4 + GIF on the free tier, 720p mp4 + webm on Pro, all resolutions on Scale.
Works with AI features too
If your app has an AI coach that recommends movements, have it return exercise slugs and resolve them through WorkoutDB so every recommendation comes with a correct, real demonstration video — instead of a hallucinated link.
Related questions
- Do I need to host the videos myself?
- No. WorkoutDB serves the media from its CDN; you render the URLs returned in each exercise response. There is nothing to transcode or store.
- Does this work in React Native / Expo?
- Yes. The API is plain REST with JSON, so it works in any client. Render the returned mp4/webm with a React Native Video component and the GIF with an Image component.
Build it on WorkoutDB
~873 exercises with demo video, ranked search, and four languages — over a clean REST API. Start free: 5,000 requests/month, no credit card.