Last night, I spent some time exploring Twitter’s documentation for embedding tweets. I needed to embed a tweet with an attached video, play the video programmatically, and detect when the video finishes. Twitter has no such API to observe playback state… but HTML5 video does! Here is my workaround, which hopefully saves you some time:
- Load Twitter’s embed widget using the tweet’s ID
- On a server (AWS Lambda in my case) use the Twitter API to lookup the tweet’s metadata
- Grab the
.mp4video URLs from the JSON response - Replace the tweet widget’s media content with a
<video>tag referencing the.mp4URL
My API, described above, is universally accessible on this site:
GET https://kofi.sexy/.netlify/functions/embed-twitter-video?tweet=<YOUR TWEET ID>
I’ll continue to host it until I run into limitations with Twitter or Netlify. You can view the source code on GitHub and a live example below:
iframe