With AI, it seems that all you need to know is how to ask questions and there’s no need to code. Still, I will assume my AI agent hasn’t read all the technical documentation and I will help it out a little by sharing some of what I know as a platform user.
My question, asked promptly…
“- Create a page that displays an OpenStreetMap map and pinpoints the videos in my playlist, which are hosted on Streamlike. All the information you need is returned by the ”playlist” web service, which is called like this: https://cdn.streamlike.com/ws/playlist?playlist_id=4420f0d43d93ccd0
– Each item is a video from which you retrieve the media_id. The position of each video is given by the latitude and longitude values. Use the smallest thumbnail (thumbnail_url) as the POI marker.
– When a thumbnail is clicked, display the video player above the POI in a 200px-tall bubble. Here’s an example of code for embedding a video:
<div style=”position: relative; width: calc(250px * 1.778); max-width: 100%; max-height: 250px; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden;”><div style=”position: relative; width: 100%; padding-bottom: calc(100% / 1.778);”><iframe src=”https://cdn.streamlike.com/play?med_id=5096db75da2d6c26″ mozallowfullscreen webkitallowfullscreen allowfullscreen allow=”autoplay; fullscreen; picture-in-picture” style=”position:absolute; top:0; left:0; width:100%; height:100%; border:0;”></iframe></div></div>”
After seeing the initial result, I requested a small improvement:
“- When videos are close to each other, display a dot indicating their number, instead of overlapping the thumbnails. Clicking on a dot zooms in and separates them; if you zoom in enough, each thumbnail becomes an individual marker again.”
If I want to integrate the result into my WordPress site, I just need to ask for the code to be adjusted so I can paste it into a block in my CMS.
And there you have it:
Give it a try
Submit the same “prompt” to your favorite AI agent and see what you get. Or adapt it, add requirements, experiment…
In less than 5 minutes, I bet you’ll be able to add a search engine to filter videos or adjust the thumbnail size based on duration or number of views!
If you have other ideas, describe them and feel free to point your agent to the Streamlike SDK on GitHub or the technical documentation; it’ll know what to do with them!